NodlumeGeometric · Crosshatch
Diamond lattice CSS texture
Diamond lattice crosses one-pixel rules in both diagonal directions at a sixteen-pixel pitch: graph paper turned forty-five degrees, so the cells are diamonds and the surface reads as a trellis. It has more energy than a grid, because diagonals move, and more order than stripes, because they cross — the most decorative line texture that still reads as structure.
Halve the per-layer alpha you would use for a single stripe; the crossings stack to double strength. Five percent is the working value. It suits section backgrounds, cards and headers, and it reads well in both modes. Open the pitch to thirty-two for a lattice, or close it to six and fix a dark base for Carbon.
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
- 16px
- Line
- 1px
- Angle
- 45°
- Ink color
- color-mix(in oklab, var(--foreground) 5%, transparent)
CSS
.diamond-lattice {
background-image: repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px),
repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px);
}Tailwind
bg-[image:repeating-linear-gradient(45deg,_color-mix(in_oklab,_var(--foreground)_5%,_transparent)_0_1px,_transparent_1px_16px),_repeating-linear-gradient(-45deg,_color-mix(in_oklab,_var(--foreground)_5%,_transparent)_0_1px,_transparent_1px_16px)]
Token
--texture-diamond-lattice: repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px);
Diamond lattice, answered
- How is the diamond lattice texture made in CSS?
- Diamond lattice 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(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 16px) — 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 diamond lattice 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 diamond lattice 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.