CSS gradient generator

How to use it

1. Choose linear or radial, then set the colours and their positions.
2. Drag the angle for a linear gradient, or leave it at the default 90°.
3. Copy the CSS and paste it into your stylesheet.

Why a blue-to-yellow gradient goes grey in the middle

A gradient is interpolation between stops, and by default CSS walks a straight line through sRGB. sRGB is not perceptually uniform, so the midpoint between two saturated, roughly opposite colours lands somewhere desaturated: blue to yellow passes through grey, red to green through muddy brown. Both endpoints are exactly the colours asked for; the path between them is the problem.

CSS Color 4 addressed this by letting the interpolation space be named. linear-gradient(in oklch, blue, yellow) interpolates through a perceptually uniform space and holds chroma along the way, while in hsl longer hue takes the long route round the wheel. Support landed across the engines during 2023, Safari first in 16.2. The default remains sRGB, and since an older engine discards the whole declaration rather than the unfamiliar keyword, a plain sRGB rule before it is the usual fallback.

Banding, and the tricks that hide it

An eight-bit-per-channel display offers 256 steps per channel. A gradient running 1,000 pixels between two dark, similar blues might traverse a dozen distinct values, giving each roughly eighty pixels of width — and the eye, unreasonably good at finding edges, reads those boundaries as stripes. Dark, low-contrast gradients over large areas are the worst case, which is why banding shows on hero sections rather than buttons.

Three things help. Extra stops add no steps but redirect the path away from the long flat stretches where bands form. A faint noise overlay dithers the boundaries, which is what design tools do before exporting. Shortening the run spends the available steps over fewer pixels each. What the copied CSS cannot do is manufacture precision the display lacks: banding is a property of colour depth, not of the rule.

Questions