Grainy gradient

The problem it solves is real and old. A gradient drawn across a large area in eight bits per channel has to quantize, and where the ramp changes slowly the same rounded value repeats for many pixels before stepping to the next one. The eye is very good at finding those steps, and they show up as banding: soft stripes running across what should be a smooth wash, worst in dark blues and greys, worst again on a large screen. Adding fine noise dithers the boundary, scattering pixels either side of each step so no stripe has a clean edge. Video and print have done exactly this for decades, which is why the fix reads as film grain rather than as a repair.

On the web the noise usually comes from SVG. An feTurbulence filter with type="fractalNoise" generates a tileable field of noise, and the whole filter can be inlined as a data URI background image, so a page gets grain with no network request and no bitmap asset. The alternatives are a small tiled PNG, which is smaller to decode but another file, and a canvas-drawn texture, which is flexible and costs script. However it is generated, the grain sits over the gradient as its own layer at low opacity, often with a blend mode so it darkens and lightens rather than greying the whole thing out.

Somewhere around 2021 the fix became a style. Landing pages, developer tool marketing, and music apps started laying visible grain over saturated washes and aurora backdrops, at strengths well past what banding would require, for the same reason the film industry keeps adding grain to digital footage: it reads as warmth and material, and it takes the plastic sheen off a flat colour. At that point the noise is not hiding an artifact, it is the texture of the brand.

Three notes for shipping it. The grain layer is decoration, so it needs aria-hidden and pointer-events: none, and it must never sit between the reader and a control. Turbulence is expensive to rasterize, so generate it once at a modest tile size and repeat it rather than filtering a full-bleed element, and never animate the filter itself. And the strength wants checking on both a phone and a high density desktop display, because grain tuned by eye on one pixel ratio can vanish or turn to sandpaper on the other.