← Visual Library / Backgrounds

Noise / grain background

A barely-perceptible film grain or static-noise texture overlaid on backgrounds. You don't consciously see it — but its absence reads as 'flat, cheap.'

Backgrounds Built

Use when — any solid-color or gradient background that looks 'too clean' — luxury brands, editorial designs, dark hero sections. The texture adds depth without distracting.

Live demo

Flat

+ Noise

↑ Subtle but the right panel feels more "expensive."

CSS

/* Approach 1: inline SVG fractal noise (no extra HTTP request) */
.section {
  position: relative;
  background: linear-gradient(135deg, var(--accent), #b85a3a);
}
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Approach 2: pre-rendered PNG noise

Generate a 256×256 tileable noise PNG (e.g. via the noise.now.sh tool or Photoshop), save as a tiny png-8, then:

.section::after {
  background-image: url('/assets/grain.png');
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

Pros: smaller payload than inline SVG. Cons: extra HTTP request.

Dials

Opacity: 0.03–0.10 for subtle. 0.20+ starts to feel like literal static.

Blend mode: overlay keeps brand colors. multiply darkens noise. screen lightens.

baseFrequency: in the SVG version, higher = finer grain. 0.9 is film-grain fine. 0.4 is chunky paper texture.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.