Home › CSS Gradient Generator
Private: nothing leaves your browser. No sign-up.
CSS Gradient Generator
Create beautiful CSS gradients visually. Free, no sign-up, copy-ready code.
What it does
Pick a gradient type, add up to six color stops with positions, and drag the angle slider. The preview updates live and the tool outputs the exact background declaration to paste into your stylesheet.
Gradient types
Linear blends colors along a direction, radial blends outward from a center point, and conic sweeps colors around a circle, great for pie charts and color wheels.
Private by design
Everything runs in your browser. Nothing leaves your device.
Planning estimate only. Results use the list prices shown and may differ from your actual bill. Terms
Frequently asked questions
Do gradients work in all browsers?
Linear and radial gradients work everywhere modern. Conic gradients work in all current browsers but not very old ones.
Can I use more than two colors?
Yes. Add up to six color stops and position each along the gradient.
Is anything sent to a server?
No. The editor runs entirely in your browser.