CSS Gradient Generator
Build a CSS gradient visually: pick colours, set the direction and gradient type, and copy the code straight into your stylesheet.
Settings
Preview
Private by design. The gradient is computed entirely in your browser. No data leaves your device.
How gradients work in CSS
Linear gradients
A linear gradient paints colour stops along a straight line. The angle controls the
direction: 0deg goes bottom-to-top, 90deg goes left-to-right,
and so on clockwise.
Radial and conic gradients
Radial gradients radiate out from a centre point, while conic gradients sweep around a central point like a clock hand. Both are generated here with the same colour-stop picker.
Adding colour stops
Click "+ Colour" to add another stop. Each stop has a colour and a position (0-100%). Stops in the middle create more complex effects. The generated CSS is ready to paste into your stylesheet.
How to use the CSS Gradient Generator
- Pick the colours for your gradient stops.
- Choose linear or radial, and set the direction or shape.
- Copy the generated CSS.
Frequently asked questions
Does it generate vendor prefixes?
It outputs standard CSS; most modern browsers support gradients without prefixes.
Can I add more colour stops?
Yes. Add stops and position them to build multi-colour gradients.
Is the preview accurate?
The preview uses exactly the CSS that is copied, so what you see matches what you paste.