Create beautiful CSS gradients visually and get CSS & Tailwind code instantly.
background: linear-gradient(135deg, #E91E8C 0%, #7B2FBF 100%);
Select between linear (directional), radial (circular), or conic (angular) gradient types.
Click color swatches to change colors, adjust position percentages, and add or remove color stops. Try the presets for inspiration.
For linear gradients, set the angle. For radial, choose the shape and center position. For conic, set the starting angle.
Switch between CSS and Tailwind CSS output tabs, then click Copy to get the code for your project.
We support all three CSS gradient types: linear-gradient (for directional gradients), radial-gradient (for circular gradients), and conic-gradient (for angular gradients).
Yes. Switch to the Tailwind CSS tab to get the gradient as an arbitrary value class that works directly in your Tailwind projects.
You can add as many color stops as you need. The minimum is two stops, which are required to create a gradient.
Yes. All presets and generated gradients are free to use in any personal or commercial project without attribution.
Convert colors between HEX, RGB, and HSL formats with live preview and CSS output.
Open ToolGenerate SEO meta tags with live Google SERP and social media card previews.
Open ToolCompress and optimize images online. Reduce file size with adjustable quality, resize, and format conversion.
Open Tool