CSS Gradient Generator

A CSS gradient is an image the browser draws rather than downloads. That is why it scales to any size without blurring, costs no network request, and can be animated by changing the numbers.

Linear runs along an angle, where 0deg points up and angles increase clockwise — so 90deg runs left to right and 180deg runs top to bottom. This trips people up because it is the opposite of the old vendor-prefixed syntax, where the angle described where the gradient came from.

Radial spreads outward from a point. A circle stays round whatever the shape of the box; an ellipse stretches to follow it, which is usually what you want for a wide banner.

Conic sweeps around a point like a clock hand. It is what pie charts and colour wheels are made of, and with hard stops — two stops at the same position — it produces flat segments rather than a blend.

The muddy middle, and how to fix it. Put a saturated blue at 0% and a saturated yellow at 100%. The centre goes grey-green and lifeless. This is not a bug — the browser interpolates in sRGB, straight through the middle of the colour cube, and the middle of the cube is grey. Add a third stop at 50% in the hue you expected the transition to pass through and the whole gradient comes alive.

Hard stops make stripes. Set two stops to the same position, say both at 50%, and the colour changes instantly instead of blending. Repeat the pattern and you have a striped background with no image file — useful for progress bars, warning tape and the diagonal hatching that marks a disabled area.

A subtle gradient beats a flat colour on large surfaces. Two stops a few percent apart in lightness give a page background depth that a solid fill does not, and at that distance nobody consciously registers it as a gradient. The obvious two-vivid-colours gradient is a trend; this is not.

What to watch for. Text over a gradient has a different contrast ratio at each end. Check both extremes in the contrast checker, not just the midpoint — headline text that is legible at the top of a hero and invisible at the bottom is a common and entirely avoidable failure.