CSS Gradient Generator
Linear, radial and conic gradients.
- 100% free
- No sign-up
- Runs in your browser
Gradients without guesswork
Drag colour stops, set an angle and watch the gradient update, then copy CSS that works in every modern browser — with a solid fallback colour first.
Stuck for ideas? The random button generates harmonious two-colour gradients.
- 1
Choose a type
Linear, radial or conic.
- 2
Set stops & angle
Up to eight colours.
- 3
Copy the CSS
Paste into your stylesheet.
Frequently asked questions
Do I need vendor prefixes?
No. Unprefixed gradients have worked in every major browser for years.
Can I use it for text?
Yes — combine it with background-clip: text and a transparent text colour.
Is my data uploaded anywhere?
No. Everything runs in your browser with JavaScript — nothing you type or open is sent to our servers.