CSS Gradient Generator
Build linear, radial and conic CSS gradients with multiple colour stops, a live preview and copy-paste code — free, no upload, in your browser.
background: linear-gradient(90deg, #8b5cf6 0%, #06b6d4 100%);🔒 Generated in your browser — nothing is uploaded.
Design CSS gradients visually
Add up to eight colour stops, drag their positions, choose linear, radial or conic, and set the angle or radial
shape — the preview updates live and the ready-to-paste background declaration is generated for you.
Every configuration is captured in a shareable link. Copy it straight into your stylesheet.
Linear, radial and conic
A linear gradient blends colours along a straight line at the angle you set; a radial gradient blends outward from the centre (as a circle or ellipse); a conic gradient sweeps colours around a centre point — handy for colour wheels, pie charts and progress rings. All are pure CSS with no images.
Frequently asked questions
Can I use the gradient anywhere?
Yes. The generated value works as a CSS background on any element in every modern browser.
How many colours can I add?
From two up to eight stops. Each stop has its own colour and position, and you can remove any stop back down to two.
Does the angle apply to every type?
Angle applies to linear and conic gradients. Radial gradients blend outward from the centre instead, so they offer a circle/ellipse shape control rather than an angle.
Is anything uploaded?
No. The gradient is built in your browser from your colour choices; nothing is sent anywhere.