CSS Gradient Generator

The grey dead zone

A gradient between two saturated colours interpolates through the sRGB colour space by default, and the midpoint frequently lands as a desaturated grey or brown. Blue to yellow is the classic offender. The fix is either adding a midpoint colour stop that keeps saturation up, or interpolating in a perceptually uniform space using the in oklab syntax, which modern browsers support and which avoids the problem entirely.

Three kinds of gradient

Linear runs along an axis you specify in degrees or keywords. Radial expands from a point, with circle or ellipse shape and a size keyword controlling where it ends. Conic sweeps around a centre, which is what makes pie charts, colour wheels and the sharp-edged pattern effects possible in pure CSS.

Colour stops do more than you think

Placing two stops at the same position creates a hard edge rather than a blend, which is how gradients are used to draw stripes and geometric patterns without images. Repeating gradients extend that further. Most non-obvious CSS background effects are hard-stop gradients rather than anything exotic.

Gradients cannot be transitioned

CSS cannot animate between two background-image gradients, because they are images rather than interpolatable values. The standard workaround is a gradient larger than the element with an animated background-position, or two stacked layers with opacity crossfading between them. Attempting a direct transition simply snaps.

Text over a gradient needs care

Contrast varies across the gradient, so text that is legible at one end can fail at the other. Check the ratio at both extremes, not at the average. Where the text must sit over a wide range, a semi-transparent overlay or a text shadow is more reliable than hoping.

Banding on subtle gradients

A gradient across a large area between two similar colours produces visible bands, because 8-bit colour has too few steps to render the transition smoothly. Adding a very subtle noise overlay breaks the bands up and is what most polished implementations do.