Gradient Generator

Angle, in the way CSS actually means it

The single most common surprise with linear-gradient is the angle. CSS measures it as the direction the gradient travels towards, clockwise from straight up. So 0deg runs bottom to top, 90deg runs left to right, and 180deg runs top to bottom — the reverse of the mental model most people arrive with.

The keyword forms read more clearly when the direction is a simple one: to right is identical to 90deg, and to bottom right points at the corner regardless of the element’s aspect ratio, which a fixed angle does not. Drag the angle control here and the generated CSS updates either way, so you can see the two forms describe the same thing.

Where the color stops go

A gradient with no positions spreads its stops evenly, which is rarely what you want. Two stops at 0% and 100% spend half the element on the transition. Pushing them inward — say 20% and 80% — gives each color a solid run and compresses the blend into the middle, which reads as more deliberate and survives being scaled down.

Adding a third stop is where gradients usually go wrong. Two colors that are pleasant together often pass through an unpleasant third on the way, especially when they sit opposite each other on the color wheel; the midpoint drains to grey or brown. If a two-stop gradient looks muddy in the middle, the fix is usually a tighter hue range rather than an extra stop.

Repeating, radial and hard stops

Two stops at the same position produce a hard edge instead of a blend — #fff 50%, #000 50% is a two-tone split, not a gradient. Chain those and you have stripes, which is how most CSS-only pattern tricks work. It is also the reason a gradient sometimes bands unexpectedly: two stops have landed closer together than you intended.

Radial gradients follow the same stop syntax but travel outward from a point, and default to farthest-corner, so the shape responds to the element’s proportions. For backgrounds that need to feel lit rather than painted, a radial gradient positioned off-centre usually beats a linear one.

Frequently asked questions

Do I still need vendor prefixes?

No. Unprefixed linear-gradient and radial-gradient have been supported across every current browser for years. Prefixed versions only matter if you are supporting browsers old enough that the rest of your CSS would break anyway.

Why does my gradient look banded?

Banding shows up when two stops are close in hue and lightness and the element is large, so the browser has too few steps to work with. Widen the difference between the stops, or overlay a very faint noise texture — a few percent of grain hides the steps without being visible itself.

Can I use a gradient on a border?

Not with border-color, which only takes solid colors. Use border-image with a gradient, or set the gradient as the background of a wrapper with a couple of pixels of padding and a solid-background child on top. The second approach is more code but keeps border-radius working.

Is there a way to save a gradient I have made?

Copy the CSS — it is the whole definition. If you think others would use it, the submit form adds it to the library, and the curated collection is where the accepted ones end up.

Other gradient tools

• Animated Gradient Generator — the same thing with motion and exported keyframes
• Gradient Text Generator — apply a gradient to a headline instead of a background
• Mesh Gradient Generator — several color points blended across a surface
• Tonal Gradient Generator — one color, a full tint-to-shade scale