SVG Grain Generator

SVG grain: bringing film texture to the modern web

Film grain is the speckled, fuzzy texture inherent to analogue photography — 35mm stocks like Kodak Tri-X or Portra 400 had visible silver-halide crystals that gave images a tactile, photographic quality. Risograph printing in the 1980s baked the same look into editorial design, and starting around 2019 the web saw a "grain renaissance": Apple, Stripe, The Verge, Linear and most Awwwards-of-the-year sites layer subtle grain over flat colours to escape the sterile flatness of pure CSS.

SVG produces grain almost for free using the built-in <feTurbulence> filter primitive — a Perlin/fractal noise generator standardised in SVG 1.1. Pair it with <feColorMatrix> to control opacity and you have a self-contained texture that compresses to a few hundred bytes:

<filter id="g">
  <feTurbulence baseFrequency="0.6" numOctaves="3"/>
  <feColorMatrix values="0 0 0 0 0
                         0 0 0 0 0
                         0 0 0 0 0
                         0 0 0 0.15 0"/>
</filter>
<rect width="100%" height="100%" filter="url(#g)"/>

Application strategies

• Full-screen overlay — fixed-position div on top of everything at 10–20% opacity; "everything looks like it was photographed".
• Large coloured areas only — apply to hero sections and CTAs; hides gradient banding on flat fills.
• Inside UI cards — gives buttons and surfaces a tactile feel without bleeding into typography.
• Over images — grain over a JPEG with mix-blend-mode: multiply instantly fakes a film look.

Performance trick: tile once, repeat forever

Running feTurbulence at full window size every frame is GPU-heavy and can drop scrolling to 30 fps on mid-range mobile. The fix: generate a single 256×256 tile, export as PNG or inline data URI, then use it as background-image with background-repeat: repeat. The browser renders the tile once and stamps it cheaply across the viewport.

Animating grain — "living" texture

Static grain looks frozen. Real film grain dances between frames because each crystal is a one-shot exposure. Reproduce the effect by mutating the seed attribute of feTurbulence inside requestAnimationFrame — or cycle through a sprite sheet of 8 pre-rendered tiles for a cheaper version. The result is TV-static-like and feels alive without being distracting.

Grain vs noise: the subtle difference

Both come out of the same primitive, but conventions differ. Noise tends to be more geometric, higher contrast, sometimes coloured — a "random pixels" look used for generative art. Grain is monochromatic, low contrast, finer — meant to disappear into the background and only register as texture, mimicking photographic emulsion. Use baseFrequency 0.6–1.2 and opacity 0.1–0.2 for grain; higher frequencies and stronger opacity move you into noise territory.

CSS-only fallback

Without SVG you can fake light grain with filter: contrast(170%) brightness(120%) stacked over a subtle radial gradient — it sharpens the imperceptible variation in colour blending. It's not real noise, but on under-powered devices or very dense pages it costs almost nothing. There's also a Tailwind plugin (tailwindcss-noise) exposing utility classes like bg-noise.

Print-style aesthetic

Pair grain with a restricted 2–3 colour palette, chunky serif typography and faux-paper texture overlay and you land in the "modern retro" / Risograph aesthetic that dominates indie SaaS, podcast art and small-batch product brands in 2024-2026 — Are.na, Read.cv, Linear changelogs and most boutique studio sites use the combination.

FAQ

Does grain hurt performance? At full-screen with live feTurbulence, yes — especially on mobile. Use a pre-rendered tile and repeat as background-image; cost drops to that of a tiny PNG.

What colour should the grain be? For photographs, multiply black grain over the image to keep the underlying colours intact. For flat brand colours, use the same colour family (slightly darker/lighter) so it textures without changing the hue.

Does it look good on mobile? Chrome Android renders feTurbulence correctly. Safari iOS occasionally shows banding or seams at tile edges — use a single large tile (≥ 512px) and test on a real device before shipping.

Accessibility? Grain is decorative; add aria-hidden="true" to the SVG. If users have prefers-reduced-motion enabled, disable any animated grain — flickering can trigger discomfort.