Fibre & noise

Paper & Grain CSS Background Textures

Noise is the quietest texture there is: a fine monochrome speckle that makes a flat backdrop read as a material without adding a single line. Generated from an inline SVG turbulence filter, it costs no image request, tiles seamlessly, and stays crisp at every pixel density.

Stay under 12%: Grain reads as paper fibre below about 12% opacity and as dirt above it.
Layer behind content: Paint the speckle on an isolated negative-z layer, never on text itself.
Invert for dark mode: Flip black speckle to white on dark themes, or the grain disappears.

Texture examples

4 surfaces built from CSS alone

Every swatch below is painted by the declaration beside it — no image files. The tints come from color-mix over your theme tokens, so switch modes and watch each sample follow.

Paper grain

Lay a fine desaturated speckle over the page background so the canvas reads as paper rather than a flat fill.

Desaturate the turbulence output with feColorMatrix — colored noise speckles a neutral palette with confetti.

.texture-paper { position: relative; isolation: isolate; }
.texture-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg …
    feTurbulence type='fractalNoise' baseFrequency='0.6'
    numOctaves='4' stitchTiles='stitch' …");
}

Vellum

Cross a wide, faint tracing-sheet ruling with visible grain for a drafting-table surface that still stays quiet.

Keep the ruling wider and fainter than a working grid — vellum is atmosphere, not an alignment aid.

background-image:
  linear-gradient(color-mix(in oklab, var(--foreground) 4%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in oklab, var(--foreground) 4%, transparent) 1px, transparent 1px);
background-size: 32px 32px;
/* plus the paper-grain layer at 9% */

Film grain

Enlarge and strengthen the speckle for a cinematic, analog-photo backdrop behind hero and marketing sections.

Reserve it for large display surfaces — at app density coarse grain competes with small text.

/* lower baseFrequency = larger flecks */
feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2'
/* …or simply scale the tile up: */
background-size: 320px 320px;
opacity: 0.14;

Noise over gradient

Float a whisper of grain over a soft brand gradient — the speckle hides the banding that wide gradients produce on cheap panels.

Keep the gradient in the surface's own hue family; the noise disguises banding, not a clashing color.

background-image:
  linear-gradient(160deg,
    color-mix(in oklab, var(--primary) 14%, transparent),
    transparent 65%);
/* plus the paper-grain layer at 8% */

Implementation check

Ship the quiet version everywhere else.

Judge the texture at arm's length with real content on top, in both modes. Then remove it for print and forced-color modes, and confirm text contrast is measured against the texture's darkest fleck — not the base surface alone.

@media print {
  .texture { background-image: none; }
}

@media (forced-colors: active) {
  .texture { background-image: none; }
}

Continue the reference

Related texture guides

Compare the neighboring materials before committing a surface.

View all textures

Grids & rulingsDraw graph paper, dot grid, notebook ruling, blueprint, and crosshatch backgrounds with repeating CSS gradients tinted from your theme tokens.Read guide Fabric & weavesRecreate canvas weave, linen, pinstripe, and twill surface textures in pure CSS with tight layered gradients that follow your color tokens.Read guide Geometric patternsBuild checkerboard, polka dot, diagonal stripe, and diamond lattice backgrounds with conic and repeating CSS gradients — no image files.Read guide

Carry the material into a complete theme.

Nodlume ships textures as .texture-* utility classes beside your palette, fonts, and shadows, generated into the React project with everything else.

Start planning free