CSS gradient generator
Build linear, radial and conic CSS gradients visually. Pick colors, adjust angles and stops, then copy production-ready CSS. Free, no sign-up, runs in your browser.
90°
Click the bar to add a stop
0%
50%
100%
background: linear-gradient(90deg, #ff006e 0%, #3a86ff 50%, #8338ec 100%);Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Pick a gradient type: linear, radial or conic.
- Click the gradient bar to add color stops, then drag or adjust each one.
- Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
- What gradient types are supported?
- Linear (any angle), radial (circle or ellipse), and conic (sweep from a center point). Switch between them with one click and the CSS updates live.
- Can I add more color stops?
- Yes — click anywhere on the gradient bar to add a new stop, drag to reposition, and click a stop to change its color. The generated CSS reflects every change instantly.
- Is the output production-ready?
- Yes — the CSS is clean, standard-compliant and ready to paste into any stylesheet. It includes fallback plain colors for older browsers when relevant.