CSS Gradient Generator
Visually build linear and radial CSS gradients with multiple color stops, then copy clean, ready-to-use CSS.
Live Preview
Generated CSS
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The CSS Gradient Generator is a free, client-side tool for building linear and radial gradients visually. Add up to six color stops, drag their positions, and watch the preview and generated CSS update instantly.
Switch between a linear gradient (with a full 360° angle control) and a radial gradient (circle or ellipse, positioned anywhere in the box) — then copy the ready-to-use background declaration straight into your stylesheet.
FAQ
A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions colors outward from a center point in a circle or ellipse shape.
Up to 6 color stops per gradient, with a minimum of 2. Each stop has its own color and position (0–100%), so you can build multi-color transitions, not just two-color blends.
Yes. linear-gradient() and radial-gradient() have been supported unprefixed in every modern browser for years, so the CSS this tool generates is safe to ship as-is.
Yes — paste the generated `background:` declaration onto any block-level element. It works the same on a <div>, a button, or the <body>.
No. Everything is computed and rendered locally in your browser.