CSS Gradient Generator

Build linear, radial and conic gradients by listing colour stops one per line, then fine-tune the angle, shape and centre. The preview updates instantly and the CSS includes a solid fallback colour for very old browsers or forced-colours modes, ready to paste into any stylesheet.

CSS & Frontend Runs in your browser

Build a CSS Gradient

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Gradient type

Angle

Repeating gradient

Colour stops, one per line: colour and optional positionAny CSS colour, then an optional position such as 40%, 120px or two positions for a hard band (red 20% 40%). Lines without a position are spread evenly.

How to Use the CSS Gradient Generator

Choose Linear, Radial or Conic.
Edit the colour stops: one colour per line, with an optional position.
Adjust the angle (linear and conic) or the shape, size and centre (radial).
Copy the CSS from the box below the preview.

About This Tool

Web designers and front-end developers creating backgrounds, buttons, hero sections or chart segments, and anyone learning how CSS gradient syntax works.

Input: Colour stops and settings · Output: CSS background.

Features and Limitations

Features

Any CSS colour format in stops: hex, rgb(), hsl(), named colours and transparent.
Double-position stops for hard colour bands and stripes.
Repeating variants of all three gradient types.
Each stop is validated by your browser, with a clear message naming the bad line.

Limitations

Only one gradient layer is built at a time; stack several by separating them with commas in your own CSS.
Colour interpolation hints (a bare percentage between two stops) and interpolation colour spaces such as “in oklch” are not offered as controls.
Results are computed in your browser; nothing you enter is sent to a server.

Example

Stops #ff7a18 0%, #af002d 55% and #319197 100% at 135° give background: linear-gradient(135deg, #ff7a18 0%, #af002d 55%, #319197 100%);

Frequently Asked Questions

How do I make hard stripes instead of a smooth blend?

Give two neighbouring stops the same position, or use double positions such as red 0% 25%, blue 25% 50%, and tick Repeating for a pattern.

What does the angle mean?

0deg points to the top and angles turn clockwise, so 90deg runs left to right and 180deg top to bottom. For conic gradients the angle sets where the sweep starts.

Do I still need vendor prefixes?

No. Unprefixed linear, radial and conic gradients work in all current browsers. The generated fallback background-color covers very old ones.

Can I use transparent in a stop?

Yes. Modern browsers interpolate in premultiplied colour, so fading to transparent no longer produces a grey band.