Grain from the browser, not a texture file

Grain from the browser, not a texture file

An SVG turbulence filter as a data URI: nothing to download, it tiles seamlessly, and the same seed always gives the same grain.

What the grain is actually fixing

Add noise to a design and it looks tactile, which is the reason most people reach for it. The more useful reason is banding. A gradient across a large area has to step between colours that are only one value apart in eight-bit colour, and on a wide, shallow gradient those steps become visible as stripes. The picture is correct; there simply are not enough intermediate values to draw it smoothly.

A light layer of noise breaks the boundaries up. The steps are still there, but the eye can no longer find the edges, and the gradient reads as continuous. This is the same trick as dithering, and it is why a faint grain over a big background gradient is worth adding even when you do not want a visible texture — at low opacity the noise is invisible and the banding is gone.

The cost is paint, not bytes

Generated as an inline SVG filter, the grain adds essentially nothing to the page weight — no extra request, no image file, a few hundred characters in the stylesheet. That is the appeal, and it makes it tempting to apply generously.

The expense turns up elsewhere. A turbulence filter is computed rather than fetched, and across a very large surface — a full-page background, an element that animates or scrolls beneath other content — that computation is real work for the browser to repeat. On low-powered devices it is the sort of thing that quietly costs frames. Keep it to a fixed background rather than something being repainted, and treat a full-viewport grain as worth measuring rather than assuming.