NodlumeWeaves & fabric · Crosshatch
Carbon CSS texture
Carbon is a tight crosshatch of hairlines at a six-pixel pitch, laid on a near-black base, so the surface has the diagonal twill of carbon fibre. It is the dark-mode weave: where linen is cloth in daylight, carbon is a technical material under a lamp, and it belongs on the surfaces of hardware, automotive, gaming and developer products.
The ink is the foreground, so on a dark theme the hatching is light and faint, which is the effect; on a light theme the same texture becomes a gray crosshatch, so fix the base as here if it must stay dark. Keep the alpha under five percent — the two layers cross and stack — and put nothing smaller than body text on it.
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
- Crosshatch
- Ink
- theme foreground at 4%
- Pitch
- 6px
- Line
- 1px
- Angle
- 45°
- Base
- #0a0a0a
- Ink color
- color-mix(in oklab, var(--foreground) 4%, transparent)
CSS
.carbon {
background-color: #0a0a0a;
background-image: repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 6px),
repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 6px);
}Tailwind
bg-[#0a0a0a] bg-[image:repeating-linear-gradient(45deg,_color-mix(in_oklab,_var(--foreground)_4%,_transparent)_0_1px,_transparent_1px_6px),_repeating-linear-gradient(-45deg,_color-mix(in_oklab,_var(--foreground)_4%,_transparent)_0_1px,_transparent_1px_6px)]
Token
--texture-carbon: repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 6px);
Carbon, answered
- How is the carbon texture made in CSS?
- Carbon is two repeating linear gradients at mirrored angles, so the crossings stack to roughly double the per-layer alpha. Its ink is the theme's foreground color mixed to 4% 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(45deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 4%, 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 carbon 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 carbon texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 4%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.