Gradient Generator
Build a linear, radial or conic CSS gradient with up to five colour stops, and copy the CSS.
1 min read
Runs in your browser — your text and files never leave your device.
135°
0%
100%
The preview uses exactly the CSS below, so what you copy is what you saw.
Dial in a gradient visually and take away the exact CSS, including the angle and the position of every stop.
How to use it
- Choose linear, radial or conic.
- Set the angle and move each stop’s position.
- Copy the CSS rule into your stylesheet.
Good to know
- Stops are sorted by position in the CSS, so the gradient never has an unintended jump.
- The preview uses exactly the CSS shown below it — what you copy is what you saw.
Related tools: Color Palette Generator · CSS Shadow Generator
Frequently asked questions
How many colour stops can I use?
Up to five, which covers almost every practical gradient without becoming a mess.
Which browsers support conic gradients?
All current browsers do. Older browsers simply show no background image, so keep a background colour underneath.