CSS Gradient

Linear, radial or conic — unlimited color stops, live preview, instant CSS.

What is this CSS gradient generator?

This free CSS gradient generator lets you design linear, radial and conic gradients with unlimited colour stops, dial the angle visually, toggle repeating mode and copy production-grade CSS — everything runs in your browser.

How do I create a multi-stop CSS gradient online?

Pick a gradient type (linear, radial or conic), add as many colour stops as you need, drag them along the bar to set positions, then copy the generated CSS. The preview updates live and the code is one tap away.

Key features

Three gradient types
Linear, radial and conic — each with its own ergonomic controls (angle dial, shape and position selectors, from-angle).
Unlimited colour stops
Add as many stops as you need, set each colour and position, delete or reorder in one click.
Repeating mode
One toggle turns any gradient into repeating-linear, repeating-radial or repeating-conic for stripes, scan lines and sunbursts.
Production-grade copy
Grab the canonical CSS or a Tailwind arbitrary-value class with one click.

How to use it

Pick the gradient type from the segmented control. For linear, drag the angle dial; for radial, pick a shape and position; for conic, set the from-angle. Tune each colour stop in the bar below, add new ones with the plus button, then copy the CSS when you are happy.

Frequently asked questions

What is the difference between linear, radial and conic gradients?

Linear blends along a straight line at an angle, radial spreads outward from a centre point in a circle or ellipse, and conic sweeps colours around a centre point like a pie chart.

How do colour stops with positions work?

Each stop has a colour and an optional position percentage. The browser interpolates between consecutive stops. Pinning two adjacent stops at the same position creates a hard line, which is how you build stripes or split backgrounds.

When should I use a repeating gradient?

Toggle Repeating mode for stripes, scan-lines or sunbursts. The browser tiles the same gradient indefinitely, so two stops at 0% and 10% will fill the box with a 10%-wide repeated pattern.

Built by the Toolbox team against the W3C CSS Images Module Level 3 and Level 4 specifications, with the same gradient syntax the browser parses, so what you preview is exactly what production CSS will paint.