NodlumeGeometric · Checker
Checkerboard CSS texture
Checkerboard alternates faint squares in a single repeating conic gradient — one declaration, no images — and at full contrast it is the universal symbol for a transparent region, the surface every image editor shows behind an alpha channel. At six percent it is something else: a quiet geometric texture with more structure than a grid and less direction than a stripe.
Use it faint behind a color or image picker where transparency matters, or as a section background for something playful. Keep the squares at twenty-four pixels or larger; below that the pattern shimmers. Do not use it faint where a transparency checker also appears on the page — the two read as the same thing at different strengths.
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
- Checker
- Ink
- theme foreground at 6%
- Pitch
- 24px
- Ink color
- color-mix(in oklab, var(--foreground) 6%, transparent)
CSS
.checkerboard {
background-image: repeating-conic-gradient(color-mix(in oklab, var(--foreground) 6%, transparent) 0% 25%, transparent 0% 50%);
background-size: 24px 24px;
}Tailwind
bg-[image:repeating-conic-gradient(color-mix(in_oklab,_var(--foreground)_6%,_transparent)_0%_25%,_transparent_0%_50%)] bg-[size:24px_24px]
Token
--texture-checkerboard: repeating-conic-gradient(color-mix(in oklab, var(--foreground) 6%, transparent) 0% 25%, transparent 0% 50%); --texture-checkerboard-size: 24px 24px;
Checkerboard, answered
- How is the checkerboard texture made in CSS?
- Checkerboard is a single repeating conic gradient — a quarter turn of ink, a quarter of transparency — sized to the square. Its ink is the theme's foreground color mixed to 6% with color-mix, so the same declaration re-tints itself when the theme switches between light and dark mode. The full declaration is repeating-conic-gradient(color-mix(in oklab, var(--foreground) 6%, transparent) 0% 25%, transparent 0% 50%) — 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 checkerboard 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 checkerboard texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 6%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.