Gradient Generator
Design beautiful CSS gradients in seconds.
Click the bar to add a stop (up to 5) · drag stops to move · click a stop to edit · double-click a stop to remove
Selected stop
Gradient type
Presets
How to use this tool
Shape your gradient
Click the bar to add stops, drag them to position, pick linear or radial.
Fine-tune colors
Select any stop to change its color and exact position, or start from a preset.
Copy the CSS
One click copies production-ready CSS you can paste straight into your project.
Frequently asked questions
How many color stops can I use?
Between 2 and 5. Click the gradient bar to add a stop, drag stops to reposition them, and double-click a stop to remove it.
What's the difference between linear and radial?
Linear gradients flow along a straight line at your chosen angle. Radial gradients radiate outward from the center in a circle.
Will the CSS work in all browsers?
Use a current browser with JavaScript enabled. Support for individual file types, graphics features and large files depends on the browser and device; try a smaller file if a task exceeds available memory.
Can I edit the hex code directly?
Yes — select a stop and type any hex code into the text field, or use the color picker for a visual choice.
Is my work saved anywhere?
No. Everything runs locally in your browser and nothing is uploaded or stored.