SVG Noise Generator

SVG noise: how procedural grain works

Noise (or grain) is a granular texture overlaid on flat colours and gradients to make a design feel tactile and to mask the visible banding that 8-bit displays produce on subtle colour transitions. The Awwwards generation of designers picked it up around 2020 — Apple uses it on landing pages, brutalist sites paint with it, and risograph-style illustrations rely on it. The trick that made it cheap and resolution-independent is the SVG filter primitive <feTurbulence>, a built-in Perlin-style noise generator shipped by every modern browser.

The minimum viable noise filter looks like this:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.9"
                  numOctaves="3" stitchTiles="stitch"/>
    <feColorMatrix values="0 0 0 0 0
                            0 0 0 0 0
                            0 0 0 0 0
                            0 0 0 0.4 0"/>
  </filter>
  <rect width="100%" height="100%" filter="url(#n)"/>
</svg>

What each parameter does

• baseFrequency — resolution of the noise. Lower (0.4) is smoother and cloud-like; higher (1.5) is granular and film-like. The sweet spot for grain overlays is 0.7–0.9.
• numOctaves — how many noise layers are summed. More octaves means more visual detail at the cost of CPU. Three is a good default.
• seed — integer that controls the pseudo-random sequence, so the same SVG renders identically every time.
• type — turbulence is more aggressive and chaotic, fractalNoise is smoother and more natural.
• stitchTiles="stitch" — makes the texture tile seamlessly, essential when you reuse it as a CSS background.

Using noise from CSS

The most ergonomic way to apply the noise is to inline the SVG as a data URI and feed it to background-image. The Tailwind plugin pattern .bg-noise bakes this into a utility. Layer the noise above a gradient with mix-blend-mode: overlay for a print-like feel, or with opacity: 0.05–0.1 to suppress banding without altering the overall hue.

Perlin, Simplex, white noise — what is the difference?

White noise is the static of an old TV — every pixel is independently random. Perlin noise, invented by Ken Perlin in 1983 for the film Tron, is a smooth gradient noise that looks like clouds or marble. Simplex noise is Perlin's 2001 refinement, faster to compute in higher dimensions. feTurbulence uses a Perlin-family algorithm, which is why you can produce both cloud-like and grainy results just by changing the frequency.

Performance gotchas

SVG filters run on the GPU on modern browsers, but covering the entire viewport at every paint can still cost a few milliseconds on low-end devices. Two tricks: (a) render a small noise tile (256×256) once and repeat it as a CSS background — that is roughly 1 KB of payload — or (b) bake a PNG noise tile and ship it through your CDN. For animated noise, set will-change: filter sparingly and prefer animating the seed attribute with requestAnimationFrame rather than CSS, because Chrome cannot smoothly interpolate it.

FAQ

Will noise hurt my page performance? Only on full-screen animated overlays. A static 256×256 tile repeated as a CSS background is essentially free.

How much noise is "enough"? For UI design, 5–10% opacity is the sweet spot — visible up close, invisible from a distance, and enough to kill gradient banding.

Is the noise generated server-side? No — the browser computes feTurbulence locally. No bytes leave your machine and no backend rendering is needed.

Why does Safari look slightly different from Chrome? The underlying Perlin implementations follow the SVG specification but differ in subpixel rounding. The difference is usually invisible at typical opacities; if it matters, ship a PNG instead.