CSS Gradient Generator
Design linear, radial and conic gradients and copy the CSS.
0%
100%
About this tool
Create a gradient visually and copy the exact CSS. Choose linear, radial or conic, set the angle, add up to six color stops and move each along the bar. The live preview updates as you drag, and the generated background declaration is ready to paste into your stylesheet.
How to use it
- Pick a gradient type and angle.
- Choose colors and slide each stop into position, adding more if needed.
- Click Copy CSS and paste it into your stylesheet.
Frequently asked questions
Do these gradients work in all browsers?
Yes. Linear and radial gradients work everywhere, and conic gradients are supported in all current browsers.
What does the angle mean?
0° points up, 90° points right, 180° down and 270° left for linear gradients.
Can I use transparency?
Not in this version. Edit the copied CSS to use rgba() or hsla() colors if you need it.