Noise texture
A fine layer of random speckle over flat color or gradients, so a surface feels like a material instead of a screen fill.
See it
What it is
A still layer of fine random speckle blended over flat color, gradients, or photos. The randomness is usually procedural: value noise, Perlin, or fractal noise from SVG's feTurbulence, tiled as a small PNG, painted on canvas, or generated in a shader. Unlike film grain, it does not move; it behaves like a material the surface is printed on.
Two jobs. First, tactility: a big flat brand color or a glassy panel reads as a screen fill until grain gives it a surface. Second, banding repair. Wide gradients on 8-bit displays step into visible stripes, and a few percent of noise breaks the steps apart. Typical recipe is an absolutely positioned full-bleed overlay with pointer-events: none, mix-blend-mode set to overlay or soft-light, opacity between 3 and 8 percent.
Gotchas: past roughly 10 percent it stops reading as texture and starts reading as a dirty screen. A full-page SVG filter is a real repaint cost on scroll and on low-end phones, so a 128px tiled PNG usually wins. And noise is incompressible by definition, so baking it into a hero JPEG can double the file size.
Ask AI for it
Add a subtle static noise texture to this section: generate fractal noise with an SVG filter (feTurbulence, type='fractalNoise', baseFrequency around 0.8, numOctaves 3, then desaturate it), render it into a full-bleed overlay div with pointer-events: none, and blend it with mix-blend-mode: overlay at 5 percent opacity. Keep the grain fine with no visible clumping or tiling seams, and do not animate it.