CSS Gradient Generator
Create linear, radial and conic CSS gradients with multiple colour stops, live preview and copy-ready code.
Runs in your browser. Your input is processed on your device and is not uploaded to our server.
Colour stops
How to use the CSS Gradient Generator
- Pick the gradient type and angle.
- Add, move and recolour the stops.
- Copy the CSS or randomise for inspiration.
The generator writes standard CSS gradient syntax supported by all modern browsers, so no vendor prefixes are needed. Colour stops can use any position from 0% to 100%. Gradients are images in CSS, so use them with background or background-image. For text over gradients, check the contrast at both ends with the Contrast Checker.
Frequently asked questions
Do I need -webkit- prefixes?
No. Unprefixed gradients have been supported by all major browsers for years.
Can I use transparency?
Yes. Lower the alpha of a stop to fade into the background.