NodlumeGeometric · Dots
Halftone CSS texture
Halftone is a dense dot grid — two-pixel dots every six pixels — so the surface reads as the screen of a printed newspaper or comic rather than as a grid of marks. It is the dot texture with the highest visual weight, and the only one that reads as a reproduction technique, which gives it a retro, printed character none of the others have.
It works at low alpha as a texture behind a hero or a poster-like section, and at high alpha as a graphic device — a fade from halftone to solid is a classic comic transition. Keep it away from body text entirely; at this density it is the definition of visual noise. In dark mode it becomes a screen of light dots, which is often better than the light-mode version.
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 9%
- Pitch
- 6px
- Dot
- 2px
- Ink color
- color-mix(in oklab, var(--foreground) 9%, transparent)
CSS
.halftone {
background-image: radial-gradient(color-mix(in oklab, var(--foreground) 9%, transparent) 2px, transparent 2px);
background-size: 6px 6px;
}Tailwind
bg-[image:radial-gradient(color-mix(in_oklab,_var(--foreground)_9%,_transparent)_2px,_transparent_2px)] bg-[size:6px_6px]
Token
--texture-halftone: radial-gradient(color-mix(in oklab, var(--foreground) 9%, transparent) 2px, transparent 2px); --texture-halftone-size: 6px 6px;
Halftone, answered
- How is the halftone texture made in CSS?
- Halftone 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 9% 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) 9%, transparent) 2px, transparent 2px) — 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 halftone 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 halftone 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 9% is quieter than the number suggests. Treat ten percent as the ceiling for a surface that carries text.