CSS Gradient Generator
Design linear or radial gradients visually and copy the CSS in one click.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);Tip: press Space for a random gradient.
How to use this tool
- Choose linear or radial gradient type.
- Drag the angle slider (linear only) or adjust color stops.
- Pick colors for each stop and set their position.
- Click 'Copy CSS' and paste into your stylesheet.
FAQ
Is this CSS gradient generator free?
Yes, completely free with no signup, watermark, or usage limit.
Does it support conic gradients?
The current version supports linear and radial gradients. Conic gradient support is planned.
Can I share a gradient I made?
Yes — click Share to copy a link that reproduces your exact gradient for anyone who opens it.