Free tool, no signup
Gradient Generator
Design beautiful CSS gradients in seconds.
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
How it works
Done In 3 Simple Steps.
1
Choose a type
Pick linear, radial, or conic, and set the angle.
2
Design your stops
Add, remove, and reposition colour stops, or start from a preset.
3
Copy the CSS
Grab the ready-to-paste background declaration.