Noise, Grain & Texture Overlays

When to use this

• A gradient or solid background looks too clean and digital. You want to add organic texture.
• You need film-grain-style noise on a hero image, video thumbnail, or card background.
• You want the texture to tile seamlessly, animate subtly, or respond to theme colors.
• The goal is warmth and tactility, not a distortion effect.
• Do NOT use this when you need animated noise distortion or displacement -- see svg-filter-effects or liquid-displacement-effects instead.

Mental model

Grain and noise overlays work by layering a semi-transparent noise texture on top of (or blended with) the content. The three approaches, in order of complexity:

SVG feTurbulence: The simplest. Generate noise in markup, apply as a CSS filter or SVG background. Zero JavaScript, zero image assets. The noise is procedural, resolution-independent, and tiling when you use stitchTiles="stitch". Downside: CPU-rendered, and animating it is choppy.

Canvas noise tile: Generate a small (256x256 or 512x512) noise bitmap at init, export as a data URL, and tile it with CSS background-image: url(data:...). This is fast, flexible (you control every pixel), and the resulting CSS background is GPU-composited. Animating requires regenerating the tile or cycling through pre-generated frames.

CSS blend modes: Layer the noise texture (SVG or canvas) on top of content using mix-blend-mode: overlay or multiply. This lets the noise interact with the underlying colors naturally -- dark areas get more visible grain, light areas get subtle speckling. The alternative is a simple opacity reduction, which adds uniform noise regardless of underlying lightness.

The critical aesthetic line: grain should be visible as texture on close inspection but invisible as individual dots at reading distance. Opacity 0.03-0.12 for most uses. Above 0.15 it reads as dirt or a rendering bug.