Grain is a very fine noise laid over the whole page, like that of film stock. You can barely see it, and that is intended: you feel it more than you look at it. What it changes is the material of the screen. Gradients stop looking ruled, and the video, the photos and the text end up under the same light.
WithoutGrainWhat grain corrects
Banding in gradients. Most images and screens encode each color on 256 levels per channel (8 bits). In a slow gradient, especially in dark tones, the steps between two neighboring levels become visible: bands where a smooth transition was expected. The proper remedy, dithering, adds noise when the image is made, and removes the steps. Grain laid over a finished image doesn’t remove them: it masks them, giving the eye a texture that keeps it from following the line of the bands. That is often enough.
Surfaces that are too smooth. A generated image often betrays its origin through perfectly clean surfaces, without the slightest irregularity. Grain gives them back some tooth.
Materials that don’t match. A filmed video, a phone photo and a flat-color title don’t have the same texture. Under the same grain, they belong to the same page.
When to add it
- On a dark background or a gradient: that is where bands show most, and where grain is least noticed.
- On a video shot in warm light, a restaurant dining room, a workshop, a bakehouse: grain extends the image beyond the first screen.
- For a trade that lives on craft or the image: photographer, coffee roaster, gallery, wine shop.
It is better left out when the page sells sharpness above all, or when it carries a lot of small text on light backgrounds: each speck of noise is one more point between the eye and the letter. Accessibility rules require a contrast of at least 4.5 to 1 between body text and its background; on a texture, you check it at the least favorable spot.
The right intensity
In the studio, grain is set at 5% opacity, in overlay blend mode. At this dose, you don’t see it when you look for it, but the page looks flatter when you remove it. A page that embraces film can carry it stronger; beyond ten percent or so, it becomes a stance more than a finish.
One rule holds for all textures: no more than two layers at once. At the third, the image gets dirty, and nobody knows which one to remove anymore.
Why it stays still
Flickering grain looks real on a cinema video. On a web page, it is a classic cause of a site that “lags” when nothing is happening. A browser can only animate a layer’s position and opacity cheaply; any other change forces it to repaint, and a full-screen texture that changes every frame means the whole screen to repaint, sixty times a second. Movement comes from the film beneath, never from the texture above.
The first screen stays calm too: the layer rises as you scroll down. The welcome video is the page’s argument, and it is left bare.
And if the visitor has asked their device to reduce animations, the grain disappears entirely: fine noise, even still, can bother some of the people who choose that setting.
How it is made
The pattern is a small SVG image written directly into the stylesheet, with the feTurbulence filter, which produces Perlin noise, the kind used to imitate clouds or marble. So there is no file to download. The layer sits in a fixed position over the page, catches neither clicks nor scrolling, and blends into the image through overlay.
Putting grain in a layer rather than in the video has another reason: grain, random by nature, compresses very poorly. Netflix measured that by removing it at encoding and recreating it at playback, a very grainy film went from 8.3 to 2.8 megabits per second. On a site, the background video stays clean, and therefore light, and the grain comes on top, drawn by the browser.
In the studio
Grain is one of the library’s ten textures, alongside vignetting, halation, halftone, paper and light leak. You choose it at the “The texture” step, after the background.