CSS gradient generator with Tailwind output. Design linear and radial gradients visually, then copy production-ready CSS or Tailwind classes.
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.
The colour rotates around a centre point instead of moving along a line, which is what you want for colour wheels, pie style rings and progress dials.
Banding shows when two stops are close in hue and stretched over a wide area. Adding a middle stop or a slight hue shift usually removes it.
CSS cannot interpolate a background-image gradient directly. Make the gradient larger than the element and animate background-position, or rotate the element.
Yes, arbitrary values are a normal Tailwind feature. If you reuse the same gradient in several places, move it into your theme config instead.
Build frosted glass panels with backdrop-filter, previewed on real backdrops.
Open ToolBuild layered CSS box shadows with a live preview, then copy them as plain CSS or a Tailwind arbitrary value.
Open ToolDrag the handles to shape a CSS easing curve and watch it animate.
Open Tool