NodlumeGrids & rulings · Grid
Fine grid CSS texture
Fine grid is graph paper at a third of the pitch and half the alpha: an eight-pixel cell so tight that at reading distance it reads as a faint texture rather than as lines. It is the surface of developer tools and design canvases, where the grid is the underlying unit — eight pixels is the spacing scale most design systems are built on — and the texture is a quiet reminder of it.
Because the rules are so close, the alpha has to be very low; four percent here is about the ceiling before the surface goes gray. It suits dark and light modes equally, since it mixes from the foreground. Do not put it behind dense text at full width — a tight grid under small type produces moiré on some displays.
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 4%
- Pitch
- 8px
- Line
- 1px
- Ink color
- color-mix(in oklab, var(--foreground) 4%, transparent)
CSS
.fine-grid {
background-image: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 8px),
repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 8px);
}Tailwind
bg-[image:repeating-linear-gradient(0deg,_color-mix(in_oklab,_var(--foreground)_4%,_transparent)_0_1px,_transparent_1px_8px),_repeating-linear-gradient(90deg,_color-mix(in_oklab,_var(--foreground)_4%,_transparent)_0_1px,_transparent_1px_8px)]
Token
--texture-fine-grid: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 8px);
Fine grid, answered
- How is the fine grid texture made in CSS?
- Fine grid 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 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(0deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 4%, transparent) 0 1px, transparent 1px 8px) — 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 fine grid 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 fine grid 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.