Repeating shapes

Geometric CSS Background Patterns

Geometric repeats are the loudest patterns in this reference, which makes them decoration rather than texture: at reading opacity they energize a hero, an empty state, or a marketing band, and they overwhelm a form. Each one is a single CSS declaration.

Decoration, not default: Reserve shape repeats for surfaces that carry no body text.
One shape per surface: Two competing repeats on nearby surfaces read as a printing error.
Fade before the fold: Mask the pattern out before dense content begins beneath it.

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.

Checkerboard

Alternate translucent squares with a single repeating conic gradient — the classic transparency-grid surface.

At full contrast this is the universal symbol for 'transparent'; keep it faint unless that is the message.

background-image:
  repeating-conic-gradient(color-mix(in oklab, var(--foreground) 6%, transparent) 0% 25%, transparent 0% 50%);
background-size: 24px 24px;

Offset polka dots

Stagger a second dot lattice half a cell from the first so the field reads as fabric dots rather than a grid.

The half-cell offset is what separates this from the dot grid ruling — align them and you have drawn that instead.

background-image:
  radial-gradient(color-mix(in oklab, var(--foreground) 9%, transparent) 2px, transparent 2.5px),
  radial-gradient(color-mix(in oklab, var(--foreground) 9%, transparent) 2px, transparent 2.5px);
background-size: 28px 28px;
background-position: 0 0, 14px 14px;

Diagonal stripes

Run wide 45° bands across the surface — the caution-tape energy of banners, badges, and skeleton fills.

Equal band and gap widths keep the stripe calm; narrow the gap and it starts to vibrate.

background-image:
  repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 8px, transparent 8px 16px);

Diamond lattice

Cross thin diagonal rules in both directions for a trellis of diamonds — line work turned 45°.

Like the crosshatch, halve the per-layer alpha; the crossings stack to double strength.

background-image:
  repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px),
  repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px);

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

Paper & grainAdd subtle paper grain, vellum, film grain, and noise-over-gradient background textures with an inline SVG turbulence filter and pure CSS.Read guide 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

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