What does the angle mean in a linear gradient?

0° points upward and the angle increases clockwise, so 90° points rightward — the standard CSS gradient angle convention.

Can I add more than 2 color stops?

Yes — add as many stops as you like, each with its own color and position.

All tools

Converters

CSS Gradient Generator

Build a linear or radial CSS gradient with live preview, ready to copy.

🔒 Runs entirely in your browser — nothing here is ever uploaded

Remove ads →

About the CSS Gradient Generator

Builds a linear or radial CSS gradient from 2 or more color stops, with a live preview, and copies the ready-to-use CSS rule.

100% Free Runs in Your Browser No Sign-Up Required

How to use it

Choose linear or radial.
Set the angle (linear) or shape (radial).
Set each color stop's color and position percentage.
Add more stops if needed.
Copy the generated CSS rule.

Formula

linear-gradient(angle, color1 pos1%, color2 pos2%, ...) or radial-gradient(shape, color1 pos1%, color2 pos2%, ...)

Worked example

A linear gradient at 90°, from blue at 0% to pink at 100%, generates background: linear-gradient(90deg, #4C8DD4 0%, #D44C8D 100%);

Interpreting your result

Stop positions are independent of stop order in the list — a later stop can have an earlier position, which reverses part of the gradient's direction at that point.

Frequently asked questions

Linear gradients transition along a straight line at a set angle; radial gradients transition outward from a center point in a circle or ellipse shape.