Gradient Generator
Create beautiful CSS gradients online. Design linear, radial, and conic gradients with a live preview and copy CSS instantly.
#3B82F60%
#8B5CF6100%
background: linear-gradient(to right, #3b82f6 0%, #8b5cf6 100%);
Presets
About Gradient Generator
Build stunning CSS gradients with a real-time visual editor. Choose from linear, radial, and conic gradient types. Customize direction, add unlimited color stops, adjust positions, and get the exact CSS background property to copy into your project. Includes beautiful preset gradients to get started.
css gradient generatorgradient generatorlinear gradient cssgradient color pickercss background gradientcreate gradient onlinegradient maker freegradient css tool
Your privacy is built in
Everything in Gradient Generator runs locally in your browser — your data never leaves your device and is never uploaded to a server, so nothing you enter is stored or seen by anyone else. No account, no sign-up, no watermark, and completely free.
Frequently asked questions
What gradient types are supported?
Linear gradients (with direction or angle), radial gradients (circle), and conic gradients.
Can I add more than 2 color stops?
Yes! Click "Add stop" to add as many color stops as you need at any position.
How do I copy the gradient CSS?
Click "Copy CSS" to copy the complete background property ready to paste into your stylesheet.