CSS Gradient Generator
Generate beautiful linear and radial CSS gradients with live preview
Your files never leave your browser. Nothing is uploaded to any server. Privacy Policy
Build linear, radial and conic CSS gradients visually — add as many color stops as you need, drag to reorder, adjust angle, and copy production-ready CSS in seconds. Comes with curated gradient presets to spark inspiration.
How to create a CSS gradient
1
Pick a type
Choose Linear, Radial or Conic.
2
Add color stops
Click + to add a stop, drag positions or pick presets.
3
Copy the CSS
Copy the generated background-image rule and paste it into your CSS.
Linear, radial, conic
Generate every CSS gradient type with full control over stops and direction.
Unlimited color stops
Add, remove and reorder stops — each with its own position.
Curated presets
Browse popular gradients to start from a polished baseline.
Copy CSS
Copy clean CSS, ready to paste into your stylesheet or design tool.
FAQ
linear-gradient, radial-gradient and conic-gradient — the full standard CSS gradient set.
Yes. The output uses standard CSS that works in all modern browsers without prefixes.
There's no hard cap — add as many as you need to express your gradient.
Yes. Use background-image for any element, or combine with background-clip: text and color: transparent for gradient text.
Yes. CSS gradients are GPU-accelerated and render efficiently even on mobile.