NodlumeWeaves & fabric · Grid
Linen CSS texture
Linen is canvas weave at a looser six-pixel pitch on a warm off-white base, so the threads are just visible as threads and the surface reads as cloth rather than as tooth. The warmth is the difference: the same weave on a cool white looks like a screen door, and on a warm base it looks like fabric.
It is a light-mode surface for cards, sidebars and the backgrounds of forms that should feel handmade — stationery, hospitality, crafts. Dark text holds on it at every size. It has no convincing dark counterpart, so pair it with a plain dark surface rather than trying to invert the cloth.
Under text
Reading-size copy on the texture, so the alpha is judged by legibility rather than by taste.
A card on top
Separated without a second border.
Recipe
- Kind
- Grid
- Ink
- theme foreground at 6%
- Pitch
- 6px
- Line
- 1px
- Base
- #faf7f2
- Ink color
- color-mix(in oklab, var(--foreground) 6%, transparent)
CSS
.linen {
background-color: #faf7f2;
background-image: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 6%, transparent) 0 1px, transparent 1px 6px),
repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 6%, transparent) 0 1px, transparent 1px 6px);
}Tailwind
bg-[#faf7f2] bg-[image:repeating-linear-gradient(0deg,_color-mix(in_oklab,_var(--foreground)_6%,_transparent)_0_1px,_transparent_1px_6px),_repeating-linear-gradient(90deg,_color-mix(in_oklab,_var(--foreground)_6%,_transparent)_0_1px,_transparent_1px_6px)]
Token
--texture-linen: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 6%, transparent) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 6%, transparent) 0 1px, transparent 1px 6px);
Linen, answered
- How is the linen texture made in CSS?
- Linen is two repeating linear gradients, horizontal and vertical, crossed at the same pitch and alpha. Its ink is the theme's foreground color mixed to 6% with color-mix, so the same declaration re-tints itself when the theme switches between light and dark mode. The full declaration is repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 6%, transparent) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 6%, transparent) 0 1px, transparent 1px 6px) — copy the CSS rule, the Tailwind classes or the custom property above, or open it in the playground to change the pitch, the ink or the alpha.
- How do I use the linen texture in Tailwind CSS?
- Copy the Tailwind tab: it is one or two arbitrary-value classes, bg-[image:…] for the gradient and bg-[size:…] for the pitch where the kind needs one, with spaces written as underscores. Tailwind v3 and v4 both accept the form. For a value you reuse across the site, register the Token tab's custom property in your theme and reference it from a utility.
- How subtle should the linen texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 6%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.