CSS gradients,
copy-paste ready.
Build linear, radial and conic gradients, tweak the stops, and grab the CSS — or export a PNG or SVG.
How it works
- 1
Pick a type & colors
Choose linear, radial or conic, then add color stops by clicking the bar. Drag stops to reposition them.
- 2
Tune the angle
Set the gradient angle (or radial shape) and preview it live on a button, heading and card.
- 3
Copy or export
Copy the ready-to-paste CSS, or download the gradient as a PNG or SVG at any size.
Frequently asked questions
Is this free?+
Yes — free, no signup, no watermarks. The generator runs entirely in your browser.
What's the difference between this and the background generator?+
This tool is for developers: it gives you copy-paste CSS for linear, radial and conic gradients. The background generator creates abstract wallpaper-style images (mesh gradients, blobs, low-poly) meant to be downloaded as artwork rather than used as CSS.
Can I add more than two colors?+
Yes. Click anywhere on the gradient bar to add a stop, drag stops to move them, and remove any stop (down to a minimum of two).
Can I export an image, not just CSS?+
Yes — download the gradient as a PNG or SVG at any size. SVG export covers linear and radial gradients; conic gradients have no SVG equivalent, so only PNG is offered for those.
Does it support conic gradients?+
Yes. Conic gradients render in the live preview and PNG export using the same from-angle syntax modern browsers support.