CSS gradient generator
Pick colours, drag stops and choose linear, radial or conic. The preview updates live and the CSS is ready to copy.
Runs entirely in your browser. Nothing you enter is sent to a server.
Gradient types
- Linear blends along a straight line at the angle you choose (0° goes up, 90° goes right).
- Radial spreads out from the centre as a circle or ellipse.
- Conic sweeps around the centre like a colour wheel — good for pie charts and spinners.
The first line of the generated CSS is a solid fallback colour for very old browsers and for text-contrast tools. Check that text on top of your gradient is readable at both ends with the contrast checker.
Want colours that match a photo? Pull them out with the image colour palette extractor.
Frequently asked questions
Do CSS gradients work in all browsers?
Linear and radial gradients work everywhere. Conic gradients work in all current browsers.
Why does my gradient look banded?
Large areas with similar colours can show visible steps on 8-bit screens. Add a middle colour stop or a subtle noise texture.
Can I use the gradient as a wallpaper?
Yes. Download it as a 1920×1080 PNG.