CSS Gradient Generator
Design linear, radial and conic CSS gradients with a live preview. Copy the CSS in one click.
- Runs in your browser
- No upload on server
- Free, forever
How this works
- 1Add colour stops
Click the bar to add stops. Drag them left/right to change where colours transition.
- 2Angle & type
Switch between linear, radial and conic. Set the angle so it flows the way you want.
- 3Copy the CSS
Grab the background: linear-gradient(...) line and paste it in.
Watch: colour stops → gradient CSS
- Pick a preset
- Tweak stops and angle
- Copy CSS
Live preview
Presets
Type
Color stops
0%
100%
CSS
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
How this works — and why it's private
- Pick a preset or start with two colors of your own.
- Adjust the type, angle and stop positions in the live preview.
- Copy the CSS and paste it straight into your stylesheet.
Rate CSS Gradient Generator
One tap. Anonymous. Helps others find the good tools.
No account, no email, no tracking — just a 1–5 number.
Be the first to rate