Gradient

A gradient is an image the browser draws rather than downloads, and it is described by two things: the stops (which colours, at which positions) and the geometry that sweeps between them. Linear runs the stops along an axis, radial runs them outward from a point, and conic runs them around one, which is why the same three colours can read as a sky, a glow, or a pie chart depending only on the function name.

The part that surprises people is interpolation. Between two stops the browser invents every colour in between, and which colours it invents depends on the space it works in. Blending blue to yellow in sRGB drags the midpoint through a muddy grey, because sRGB is not perceptually even; the same pair blended in oklab keeps its chroma the whole way. CSS now lets you say so directly, and a stated interpolation method is the difference between a gradient that looks designed and one that looks washed out in the middle.

Two practical failures show up constantly. Banding, where a shallow gradient over a large area is quantised into visible stripes, is fixed by adding chroma variation, a touch of noise, or more stops rather than by adding blur. And text over a gradient has no single contrast ratio: it must clear the threshold against the lightest and the darkest pixel it can land on, which usually means a scrim or a solid plate under the text rather than a hopeful eyedropper reading of the middle.

A gradient with two stops that both sit at the same position is a hard edge, and a gradient with stops repeated at intervals is a stripe pattern. That is not a trick so much as a reminder that in CSS the gradient functions are the general fill language, and a smooth blend is only the most common thing to ask them for.