CSS Noise Textures: Grain, Static & Organic Backgrounds

What Are Noise Textures?

Noise textures are subtle, random visual patterns that add organic character to digital interfaces. In the physical world, every surface has texture — paper has grain, concrete has speckle, fabric has weave. Flat digital backgrounds can feel sterile. Adding noise brings them to life.

Noise is used in film photography (grain), print design (halftone), and 3D rendering (Perlin noise). On the web, noise textures break up large solid-color areas, add depth to gradients, and create a premium, tactile feel. Apple, Linear, Vercel, and many other design-forward companies use noise overlays extensively.

SVG Filter Technique (Recommended)

The most versatile noise method uses an inline SVG filter with the feTurbulence element:

Then apply it with CSS:

baseFrequency controls the grain size — higher values create finer grain. numOctaves adds detail layers — more octaves create more complex patterns. stitchTiles ensures the pattern tiles seamlessly.

CSS Gradient Noise (No SVG)

You can approximate noise using tiny CSS gradients layered on top of each other. This technique doesn't require SVG but produces a coarser pattern:

This creates a fine dot pattern that resembles grain when viewed at normal distance. It's less random than SVG noise but works without any SVG markup and has zero external dependencies.

The Grain Overlay Pattern

The most common implementation pattern is a full-viewport overlay that sits on top of all content:

The overlay uses pointer-events: none so it doesn't block clicks, position: fixed so it covers the entire viewport even during scrolling, and a very low opacity (typically 3–6%) so it's felt more than seen.

The Noise Generator tool creates these overlays with customizable grain size, opacity, and blend mode — then gives you copy-ready CSS.

Performance Considerations

SVG filters with feTurbulence can be GPU-intensive, especially on mobile devices. The filter is computed per-pixel, and on high-DPI screens, that's a lot of pixels.

Optimization strategies:

Use a small, pre-rendered noise image (256×256 or 512×512 PNG with transparency) tiled with background-repeat instead of a live SVG filter. This trades a small network request for dramatically better runtime performance.

Limit the noise overlay to specific sections rather than the entire viewport. A noise overlay on a hero section has minimal performance impact; a full-viewport overlay on a page with heavy animations can cause jank.

Use will-change: transform on the noise overlay to promote it to its own compositing layer, reducing repaint impact on other elements.

Design Use Cases

Gradient enhancement: Noise prevents banding in CSS gradients — the visible stepping between colors that occurs in smooth gradients, especially in dark color ranges.

Hero backgrounds: A solid or gradient hero section with a 3–5% noise overlay feels more polished and intentional than a perfectly clean gradient.

Card surfaces: Very subtle noise on card backgrounds adds a paper-like texture that makes the interface feel tactile and premium.

Dark mode depth: In dark themes, noise adds perceived depth to surfaces that would otherwise look like flat black rectangles.

Vintage and analog aesthetics: Higher noise levels (8–15% opacity) create a film grain or analog feel for retro-themed designs.

Customizing Noise Appearance

Grain size: Controlled by `baseFrequency` in SVG filters. Values between 0.5–0.8 create fine grain suitable for backgrounds. Values below 0.3 create a cloud-like pattern.

Opacity: 2–4% for subtle, barely-perceptible texture. 5–8% for visible grain. 10–15% for a strong analog feel.

Color: Most noise overlays use white noise (white dots at low opacity) on dark backgrounds and dark noise (black dots) on light backgrounds. You can also use colored noise to tint the surface.

Blend mode: `mix-blend-mode: overlay` creates a more pronounced effect than normal blending. `soft-light` produces a gentler result that works well on both light and dark backgrounds.

Animated Noise Effects

Animated noise creates a film grain or TV static effect. The simplest approach shifts the background position of a tiled noise image:

Keep animated noise at very low opacity (2–3%) to avoid distraction. Use steps() instead of smooth easing to create discrete jumps that feel like real film grain rather than a sliding texture.

Always wrap animated noise in a prefers-reduced-motion check — users who have requested reduced motion should not see animated grain.