CSS Gradient Generator
Design linear and radial gradients with a live preview, then copy the CSS in one click.
Gradient type
Angle (135°)
Colour stops
0%
100%
background: linear-gradient(135deg, #08A88A 0%, #6EDEB7 100%);🔒 Generated on your device
How to create a gradient
- Pick linear or radial. And set the angle for linear.
- Choose your colours. Add stops and drag their positions.
- Copy the CSS. Paste it straight into your stylesheet.
Frequently asked questions
What is a CSS gradient?
A gradient is a smooth transition between two or more colours. CSS supports linear gradients (in a direction) and radial gradients (from a centre point), used as backgrounds.
How do I use the generated CSS?
Copy the code and paste it into your element's background property, for example: background: linear-gradient(...);.
Can I add more than two colours?
Yes. Add up to five colour stops and drag each one's position to control where the colours blend.
Is anything uploaded?
No. The gradient is generated entirely in your browser — nothing is sent anywhere.