Gradient Generator
Design CSS gradients
What is Gradient Generator?
Build CSS gradients visually — linear, radial, or conic — with any number of colour stops, live preview, and one-click copy. Includes six ready-made presets (Sunset, Ocean, Forest, Candy, Aurora, Spotlight) so you can start from a curated design and adjust from there instead of staring at a blank canvas.
How do I use Gradient Generator?
- Pick a gradient type: linear, radial, or conic.
- Adjust angle (for linear / conic) and colour stops.
- Add / remove stops or pick a preset.
- Copy the generated CSS.
When should I use Gradient Generator?
Gradient Generator produces CSS-ready strings. For a single colour, Color Picker is enough. For a box shadow rather than background, use Box Shadow.
Linear, radial, or conic gradients?
All three. Linear for side-to-side fades, radial for centre-out fades, conic for colour wheels and sweep effects.
How many colour stops can I add?
Up to 12 stops. Drag them along the bar to reposition; the preview updates live.
Can I copy the generated CSS?
Yes. Output is plain CSS (background: linear-gradient(...)) — paste straight into your stylesheet.
Is my file uploaded anywhere?
No. Everything runs in your browser. Your files never leave your device, and there is no server component for this tool.