texture.website

Texture is grain you can reuse.

Materials and patterns as page feeling. The proving ground is spwashi.com; this host is the grain lab.

Try one · take one with you · commission your own

Slices already on the site

These four tiles are the live data-spw-texture-slice families. The token is on each card.

Paper fiber

Paper fiber

Warm cellulose grain. Reading surfaces that want to stay put.

data-spw-texture-slice="paper"

Linen weave

Linen weave

Crossed threads. Cloth memory under illustration.

data-spw-texture-slice="linen"

Harlequin diamonds

Harlequin diamonds

Play lattice. Pattern that can carry a scene without becoming a costume.

data-spw-texture-slice="harlequin"

Cream ochre wash

Cream ochre wash

Thin pigment on paper. A field, not a fill.

data-spw-texture-slice="wash"

Try one under your words

Texture
Strength
Scale
Ink

Write a sentence here. The grain should carry it, not sit on top of it.

Take one with you

Save the tile beside your stylesheet and paste the rule. Free for personal and study use with credit to texture.website. Commercial use by commission.

Paper fiber

.texture-paper {
  background-color: #c4a574;
  background-image: url("texture-paper-fiber-display.webp");
  background-size: cover;
  background-position: center;
}

WebP tile · AVIF tile

Then <div class="texture-paper">…</div>

Linen weave

.texture-linen {
  background-color: #b8ad98;
  background-image: url("texture-linen-weave-display.webp");
  background-size: cover;
  background-position: center;
}

WebP tile · AVIF tile

Then <div class="texture-linen">…</div>

Harlequin diamonds

.texture-harlequin {
  background-color: #5b4a6b;
  background-image: url("texture-harlequin-diamonds-display.webp");
  background-size: cover;
  background-position: center;
}

WebP tile · AVIF tile

Then <div class="texture-harlequin">…</div>

Cream ochre wash

.texture-wash {
  background-color: #d8b886;
  background-image: url("texture-cream-ochre-wash-display.webp");
  background-size: cover;
  background-position: center;
}

WebP tile · AVIF tile

Then <div class="texture-wash">…</div>

Commission a grain

Bring a material you want a page to feel like: a notebook page, a cloth, a wall, a tabletop. It comes back as a texture family you can reuse: the tile, the rule, and a named entry in textures.json.

Rates on the services ladder · Start with a note

How a texture behaves

Stripes

Repetition with personality

Parallel bands keep rhythm without collapsing into sameness.

Grain

Surface memory

Texture should feel carried by the surface, not placed on top of it.

Glow

Attention under pressure

Accents should feel like energy coming through a material.

Response

State through contact

Hover, focus, and hold should change the reading, not only the decoration.

Metamaterials

How a surface treats the canvas underneath it. Spec on design/materials.

Paper

Opaque and warm. Stable documents that want full reading focus.

Glass

Translucent. Floating panels that stay aware of what sits underneath.

Matte

Flat and receding. Background structure that does not steal attention.

Field

High-contrast staging. Interactive tests and alert states.