About this tool
CSS gradients are everywhere — hero backgrounds, buttons, cards — but hand-writing the syntax and guessing angles is fiddly. This visual builder lets you add and drag colour stops, set the angle, and switch between linear, radial and conic gradients while watching the result fill a live preview.
When it looks right, copy the ready-made background CSS straight into your stylesheet. It is entirely client-side, so experiment as much as you like — nothing is sent anywhere.
Frequently asked questions
Does this generator add vendor prefixes like -webkit-linear-gradient?
No. Vendor-prefixed gradient syntax is only needed for very old browsers (pre-2012), so the tool outputs standard linear-gradient(), radial-gradient(), and conic-gradient() that every current browser understands.
Is my gradient design uploaded or saved anywhere?
No. Everything — color stops, angle, and preview — is generated live in your browser; nothing is sent to a server.
What's the difference between linear, radial, and conic gradients?
Linear blends colors along a straight line at a chosen angle, radial blends outward from a center point in circles, and conic sweeps colors around a center point like a color wheel.
How many color stops can I add?
As many as you need — click 'Add' to insert another stop, drag its position slider, and remove any stop except the last two.
Can I paste the generated CSS directly into my stylesheet?
Yes. Click Copy and paste the `background: ...;` line straight into any CSS rule or inline style — no editing required.