🌈CSS Gradient Generator

How to use the CSS gradient generator

1. Pick linear, radial or conic, then drag the handles on the colour bar to move each stop — click a swatch to change its colour.
2. Set the angle with the dial (linear), or the centre and size (radial and conic); tick repeating for striped patterns.
3. Copy the background rule, 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.