Cloth & thread

Fabric & Weave CSS Textures

Woven textures read as upholstery: denser than grain, warmer than line work. They are built from tight gradient stripes a few pixels apart, crossed at right angles, so the weave stays crisp without a bitmap and inherits its tint from the theme.

Tight cells: A weave reads as cloth at 3–6px spacing; at 20px it becomes a grid.
Cross two directions: One direction is a stripe; two directions is a weave.
Save it for chrome: Fabric suits headers, sidebars, and empty states — not reading surfaces.

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.

Canvas weave

Cross fine horizontal and vertical threads at a 4px pitch for the tooth of primed artist canvas.

Keep both directions at the same pitch and alpha; an uneven weave reads as a rendering artifact.

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

Linen

Loosen one direction of the weave and add a trace of grain for the irregular slub of linen cloth.

The asymmetry is the texture — equalize the two pitches and it collapses back into canvas.

background-image:
  repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 3%, transparent) 0 1px, transparent 1px 6px);
/* plus the paper-grain layer at 5% */

Pinstripe

Run a single vertical thread at a wide, regular interval — tailoring for sidebars and pricing panels.

One direction only, and keep the interval at least 6px; tighter reads as scan lines on low-DPI screens.

background-image:
  repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 6px);

Carbon twill

Stagger two dot lattices half a cell apart for the diagonal over-under rhythm of woven carbon cloth.

This is the loudest weave here — use it on small accents and keep body text off it entirely.

background-image:
  radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--foreground) 10%, transparent) 1px, transparent 1.5px),
  radial-gradient(circle at 7px 7px, color-mix(in oklab, var(--foreground) 10%, transparent) 1px, transparent 1.5px);
background-size: 12px 12px;

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 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