CSS Gradient Generator

Design a linear or radial gradient with multiple color stops and copy the CSS.

Design a gradient

Type Angle 90 degrees

background: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);

Paste the result into any stylesheet. Nothing is uploaded.

Choose a linear or radial gradient and set the angle for a linear one.
Adjust each color stop and drag its position slider, or press Add stop for more colors.
Watch the preview update live, then press Copy CSS and paste it into your stylesheet.

Common questions about the free online css gradient generator.

Pick the gradient type, set the color stops and positions, then copy the generated CSS into your stylesheet.

A linear gradient runs along a straight line set by the angle, while a radial gradient spreads outwards from the centre of the element.

Press Add stop to add another color and drag its slider to set where it appears between the first and last color.

It sets the direction of a linear gradient in degrees, where 0 points to the top and 90 points to the right.

Copy the declaration and paste it into a rule in your stylesheet, or set it as the value of a background or background-image property.

Yes. Each stop has a Remove button, and the tool keeps at least two stops so the gradient always stays valid.

Yes. Linear and radial gradients are standard CSS and are supported by all modern browsers.

No. The gradient is built entirely in your browser.

Yes, the gradient generator is completely free with no account needed.

Last updated: October 10, 2026