CSS Gradient Generator
Design linear, radial and conic CSS gradients with multiple color stops, preview them live, and copy the generated CSS.
background: linear-gradient(90deg, #6c72ff 0%, #22d3ee 100%);About the CSS gradient generator
Design linear, radial and conic CSS gradients visually and copy the code. Add as many color stops as you like, drag their positions, set the angle or shape, and preview the result live before pasting the generated CSS into your stylesheet.
Everything is generated in your browser.
All three CSS gradient types with the right syntax.
Add, remove and reposition stops with custom colors.
Control the angle for linear and the shape for radial/conic.
Grab the ready-to-use background declaration.
Frequently asked questions
What's the difference between linear, radial and conic gradients?
Linear gradients transition along a straight line at an angle, radial gradients radiate outward from a center point, and conic gradients sweep around a center like a color wheel.
How many color stops can I use?
As many as you need. Two is the minimum; adding more lets you create complex, multi-color transitions.
Can I control where each color sits?
Yes — each stop has a position percentage, so you can cluster or spread colors exactly where you want them.
Is the CSS standard?
Yes. The output uses standard CSS gradient syntax that works in all modern browsers.