Beautiful gradients, copy-paste CSS.
Design linear, radial and conic CSS gradients with a live preview. Add as many color stops as you like, dial in the angle, and copy production-ready CSS — no sign-up, all in your browser.
background: linear-gradient(135deg, #10B981 0%, #2563EB 100%);
Pick a style
Choose linear, radial or conic, then set the angle for the blend direction.
Add colors
Add color stops, tweak each hex and drag its position to shape the blend.
Copy the CSS
Grab the ready-to-use background CSS and drop it into your project.
How do I use the generated CSS?
Copy the CSS and paste it into your stylesheet as the background of an element, e.g. .hero { background: linear-gradient(...); }. It works in every modern browser.
What's the difference between linear, radial and conic?
Linear gradients blend along a straight line at the angle you choose. Radial gradients blend outward from a center point in circles. Conic gradients sweep the colors around a center like a color wheel.
How many colors can I add?
As many as you like — add a color stop for each color and drag its position to control where the blend happens.
Is this tool free?
Yes — completely free, no sign-up, and it runs entirely in your browser.
Can I edit each color precisely?
Yes. Each stop has a color swatch and a hex value you can type, plus a position slider from 0% to 100%.