CSS Gradient Generator
Build linear, radial and conic CSS gradients with a live preview — copy the CSS in one click.
background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);About CSS Gradient Generator
Design a CSS gradient visually: choose linear, radial or conic, set the angle (or radial shape), and add as many color stops as you like — each with its own color and position. The preview updates live and the ready-to-use CSS is shown below with a copy button, so you can drop it straight into a background property.
Start from a preset and tweak it, or build one from scratch. Everything is generated locally in your browser; nothing is uploaded.
A two-stop linear gradient
Linear · 90° · #6a11cb 0% → #2575fc 100%
background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
Switch to radial or conic, or add more stops, and the CSS updates instantly.
Frequently asked questions
Which gradient types are supported?
Linear (with an angle), radial (circle or ellipse) and conic gradients, each with unlimited color stops.
Can I use more than two colors?
Yes. Add as many color stops as you need and drag each one's position; the CSS is generated automatically.
Is the output standard CSS?
Yes. It produces a standard background: gradient(...) declaration that works in all modern browsers.
Is anything uploaded?
No. The gradient is built entirely in your browser.