CSS Gradient Generator
Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
Preview
Gradient type
Colour stops
Presets
CSS
Tailwind arbitrary value
SVG
SVG has no conic gradient, so conic output is approximated with wedges.
Related tools
How to use the CSS gradient generator
- Pick linear, radial or conic, then drag the handles on the colour bar to move each stop — click a swatch to change its colour.
- Set the angle with the dial (linear), or the centre and size (radial and conic); tick repeating for striped patterns.
- Copy the
backgroundrule, the Tailwind arbitrary value, or download the gradient as an SVG file.
FAQ
How do I add or delete a colour stop?
Click Add stop to insert one halfway along the bar, or press Remove on any row. Two stops is the minimum; there is no upper limit, and each stop keeps its own position in percent.
Does the Tailwind class work without config?
Yes. It uses Tailwind's arbitrary-value syntax, so bg-[linear-gradient(...)] compiles with no change to tailwind.config.js. Spaces become underscores, which Tailwind converts back.
Why does the SVG look different for conic gradients?
SVG only has linear and radial gradients. A conic gradient is exported as a fan of coloured wedges, which looks nearly identical but is made of many paths instead of one gradient definition.
Something missing or broken?
Request a tool, report a bug or share a tip with other users.