NodlumeGrids & rulings · Grid
Graph paper CSS texture
Graph paper is two sets of one-pixel rules, horizontal and vertical, crossing every twenty-four pixels. It is the most literal texture in the catalog — it looks like the sheet it is named after — and it works because a grid says measurement: the surface behind a chart, a layout tool, a spec, or a landing page that wants to feel engineered.
Both directions must share the same pitch and alpha, or the grid reads as a rendering bug. Keep the ink under eight percent on a surface that carries text; the crossings stack to nearly double strength where the rules meet. For a larger cell with a finer sub-grid, layer two of these at different pitches and halve the second one's alpha.
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 7%
- Pitch
- 24px
- Line
- 1px
- Ink color
- color-mix(in oklab, var(--foreground) 7%, transparent)
CSS
.graph-paper {
background-image: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 24px);
}Tailwind
bg-[image:repeating-linear-gradient(0deg,_color-mix(in_oklab,_var(--foreground)_7%,_transparent)_0_1px,_transparent_1px_24px),_repeating-linear-gradient(90deg,_color-mix(in_oklab,_var(--foreground)_7%,_transparent)_0_1px,_transparent_1px_24px)]
Token
--texture-graph-paper: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 24px);
Graph paper, answered
- How is the graph paper texture made in CSS?
- Graph paper 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 7% 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) 7%, transparent) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 24px) — 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 graph paper 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 graph paper texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 7%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.