What is a background texture in UI design?

A background texture is a low-contrast repeating pattern — grain, a ruling, a weave, or a geometric repeat — applied behind content to separate surfaces and give a flat theme a material feel without adding borders or shadows.

How subtle should a CSS background texture be?

Most textures work between 3% and 10% of the foreground color. Grain can reach about 12% and dots need slightly more than lines, but treat 10% as the ceiling for any surface that carries text.

How do background textures work in dark mode?

Mix rules and dots from theme tokens with color-mix so they re-tint automatically, and invert grain images in dark themes — black speckle on a dark canvas is invisible. Light-on-dark texture also reads heavier, so drop the opacity a step.

Surface & material reference

Background textures that give flat surfaces a material.

Separate the canvas from the cards on it with paper grain, rulings, weaves, and geometric repeats — each built from pure CSS gradients and an inline SVG noise tile, tinted from your theme tokens so both modes stay in key.

Browse textures Design system reference

Start with restraint

Set the mood without raising the volume.

A useful texture is felt before it is noticed: the page reads as paper, cloth, or a drafting board, and only a deliberate look reveals why. The moment a visitor sees the pattern before the content, it has become wallpaper.

Separate: Distinguish the canvas from the surfaces on it.
Recede: Content stays the loudest thing on the page.
Re-tint: Build from theme tokens so both modes stay in key.
Degrade: Drop the layer for print and forced-color modes.

Texture library

Choose the material that matches the surface.

These focused guides run from the quietest texture to the loudest: noise and paper fibre, working rulings, woven cloth, and geometric repeats for surfaces that carry no body text.

Fibre & noise

Paper & grain

Add subtle paper grain, vellum, film grain, and noise-over-gradient background textures with an inline SVG turbulence filter and pure CSS.

4 textures

Line work

Grids & rulings

Draw graph paper, dot grid, notebook ruling, blueprint, and crosshatch backgrounds with repeating CSS gradients tinted from your theme tokens.

5 textures

Cloth & thread

Fabric & weaves

Recreate canvas weave, linen, pinstripe, and twill surface textures in pure CSS with tight layered gradients that follow your color tokens.

4 textures

Repeating shapes

Geometric patterns

Build checkerboard, polka dot, diagonal stripe, and diamond lattice backgrounds with conic and repeating CSS gradients — no image files.

4 textures

Opacity scale

Loudness is a budget.

Texture strength is measured against the foreground color, and each kind of surface affords a different budget. Start with this scale, then judge the result at arm's length in both modes.

Surface	Strength	Reads as
App canvas	3–6%	Structure without noise
Cards & panels	2–4%	Quieter than the canvas behind them
Hero & marketing	8–14%	Texture promoted to decoration
Print & forced colors	0%	Drop the layer entirely

Dark mode

Re-tint the material when the lights go out.

Line work mixed from theme tokens re-tints itself. Grain does not: a black speckle on a dark canvas is invisible, so invert it — and step the opacity down, because light-on-dark texture reads heavier than the same value on white.

.texture-grain::before {
  background-image: url("data:image/svg+xml,…feTurbulence…");
  opacity: 0.11;
}

.dark .texture-grain::before {
  filter: invert(1);
  opacity: 0.08;
}

@media print {
  .texture-grain::before { display: none; }
}

Frequently asked

Background texture basics

What is a background texture in UI design?: A background texture is a low-contrast repeating pattern — grain, a ruling, a weave, or a geometric repeat — applied behind content to separate surfaces and give a flat theme a material feel without adding borders or shadows.
How subtle should a CSS background texture be?: Most textures work between 3% and 10% of the foreground color. Grain can reach about 12% and dots need slightly more than lines, but treat 10% as the ceiling for any surface that carries text.
How do background textures work in dark mode?: Mix rules and dots from theme tokens with color-mix so they re-tint automatically, and invert grain images in dark themes — black speckle on a dark canvas is invisible. Light-on-dark texture also reads heavier, so drop the opacity a step.

From material to application

Ship the texture inside a complete design system.

Nodlume's theme carries textures as .texture-* utility classes beside your palette, fonts, and shadows, and generates them into the React project with everything else.

Start planning free