NodlumeGeometric · Crosshatch
Drafting crosshatch CSS texture
Drafting crosshatch crosses hairlines at sixty degrees rather than forty-five, so the cells are elongated rhombuses and the surface reads as the section shading of an engineering drawing rather than as a lattice. The steeper angle is the whole difference: it reads as drawn by hand with a set square, where the diamond lattice reads as manufactured.
It is a texture for technical products and documentation, and for illustrating a cut or a filled region in a diagram. Keep the alpha low — the crossings stack — and keep the pitch above ten pixels or the hatching fills in. It works in both modes, and a fixed ink of the theme's primary at higher alpha turns it into a section fill.
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 5%
- Pitch
- 12px
- Line
- 1px
- Angle
- 60°
- Ink color
- color-mix(in oklab, var(--foreground) 5%, transparent)
CSS
.drafting-crosshatch {
background-image: repeating-linear-gradient(60deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 12px),
repeating-linear-gradient(-60deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 12px);
}Tailwind
bg-[image:repeating-linear-gradient(60deg,_color-mix(in_oklab,_var(--foreground)_5%,_transparent)_0_1px,_transparent_1px_12px),_repeating-linear-gradient(-60deg,_color-mix(in_oklab,_var(--foreground)_5%,_transparent)_0_1px,_transparent_1px_12px)]
Token
--texture-drafting-crosshatch: repeating-linear-gradient(60deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 12px), repeating-linear-gradient(-60deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 12px);
Drafting crosshatch, answered
- How is the drafting crosshatch texture made in CSS?
- Drafting crosshatch 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 5% 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(60deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 12px), repeating-linear-gradient(-60deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 12px) — 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 drafting crosshatch 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 drafting crosshatch texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 5%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.