Design a gradient with as many colours as you like, see it live, and copy CSS that works in every modern browser.
Loading the tool…
Gradient types
| Type | Looks like | CSS |
|---|---|---|
| Linear | Colours blend in a straight line | linear-gradient(135deg, …) |
| Radial | Colours spread out from the centre | radial-gradient(circle, …) |
| Conic | Colours sweep around a point, like a pie chart | conic-gradient(from 0deg, …) |
Tips for good gradients
- Use colours that sit near each other on the colour wheel for smooth blends.
- Two or three stops usually look better than many.
- Check text contrast at both ends if text sits on the gradient.
- Use the Random button for quick ideas, then fine-tune.
The generated CSS includes a solid background colour first, as a fallback for very old browsers and email clients.
Frequently asked questions
Do CSS gradients need browser prefixes?
No, not for current browsers.
Can I use a gradient on text?
Yes, with background-clip: text and a transparent text colour.
Do gradients work in emails?
Support is patchy, so the solid fallback colour matters there.
Is anything uploaded?
No, it all runs in your browser.
Sources
Last updated: