Free · Instant · No sign-up

CSS gradient generator

Design beautiful linear, radial and conic gradients with draggable color stops and presets — then copy the CSS.

Selected stop
Presets:

Tip: click the gradient bar to add a color stop, then drag it to position.

Why use it

🎨

Live, visual editing

Drag stops on the bar and watch the big preview update instantly.

🌀

Linear, radial & conic

All three gradient types with angle control and unlimited color stops.

📋

Copy-ready CSS

Grab clean background: CSS with one click — paste and go.

Gradient generator FAQ

How do I make a CSS gradient?

Pick linear, radial or conic, drag the color stops on the bar (click to add more), adjust the angle, then copy the generated CSS.

Can I add more than two colors?

Yes — click anywhere on the gradient bar to add a stop, drag it to position, and set its color. Add as many as you like.

Is it free?

Completely free, no sign-up, and it runs entirely in your browser.