← All tools

CSS gradient generator

Pick two colours and an angle, then copy the CSS.

From
To
Angle — 90°

Common questions

Why does my gradient look muddy in the middle?

Because sRGB interpolation passes through a desaturated midpoint when the two colours are far apart in hue. Adding a midpoint stop fixes it, or use an OKLCH gradient, which stays saturated across the transition.

What angle does 0deg mean in CSS?

It points upward — the gradient runs bottom to top. 90deg runs left to right. This differs from most design tools, which is a frequent source of flipped gradients.