NodlumeGrids & rulings · Dots
Dot grid CSS texture
Dot grid marks only the intersections of a grid: a one-pixel dot every twenty pixels, and nothing else. It is the surface most drawing canvases, whiteboards and node editors print behind their content, because it gives the eye a sense of scale and alignment without drawing any lines that would compete with the lines the user draws.
Dots need more alpha than rules — a single pixel of ink reads fainter than a full line at the same opacity — so sixteen percent here is quieter than it sounds. Tighten the spacing for a finer canvas or open it to forty pixels for a sparse one, and keep the dot at one pixel unless the grid is very open; a fat dot on a tight grid is a halftone, not a grid.
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
- Dots
- Ink
- theme foreground at 16%
- Pitch
- 20px
- Dot
- 1px
- Ink color
- color-mix(in oklab, var(--foreground) 16%, transparent)
CSS
.dot-grid {
background-image: radial-gradient(color-mix(in oklab, var(--foreground) 16%, transparent) 1px, transparent 1px);
background-size: 20px 20px;
}Tailwind
bg-[image:radial-gradient(color-mix(in_oklab,_var(--foreground)_16%,_transparent)_1px,_transparent_1px)] bg-[size:20px_20px]
Token
--texture-dot-grid: radial-gradient(color-mix(in oklab, var(--foreground) 16%, transparent) 1px, transparent 1px); --texture-dot-grid-size: 20px 20px;
Dot grid, answered
- How is the dot grid texture made in CSS?
- Dot grid is a single radial gradient repeated on a square grid, so the pitch is the background-size and the dot is the gradient's first stop. Its ink is the theme's foreground color mixed to 16% with color-mix, so the same declaration re-tints itself when the theme switches between light and dark mode. The full declaration is radial-gradient(color-mix(in oklab, var(--foreground) 16%, transparent) 1px, transparent 1px) — 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 dot 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 dot grid texture be?
- Dots need more alpha than lines — a single pixel of ink reads fainter than a full rule at the same opacity — so this preset's 16% is quieter than the number suggests. Treat ten percent as the ceiling for a surface that carries text.