NodlumeGeometric · Dots
Polka dots CSS texture
Polka dots are the dot grid with the dot grown to three pixels and the grid opened to thirty-two: the same radial gradient, but now the dot is a shape rather than a mark, and the surface is a pattern rather than a canvas. It is friendlier than any grid and more decorative than any grain, which is why it belongs on marketing surfaces and not on tools.
Ten percent is a working alpha for a background; raise it to full and fix the ink to a color for a genuine polka print. It suits consumer products, events, and children's or food brands. Keep it off surfaces that carry small text, and keep the dot under a quarter of the pitch or the pattern turns into a halftone.
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 10%
- Pitch
- 32px
- Dot
- 3px
- Ink color
- color-mix(in oklab, var(--foreground) 10%, transparent)
CSS
.polka-dots {
background-image: radial-gradient(color-mix(in oklab, var(--foreground) 10%, transparent) 3px, transparent 3px);
background-size: 32px 32px;
}Tailwind
bg-[image:radial-gradient(color-mix(in_oklab,_var(--foreground)_10%,_transparent)_3px,_transparent_3px)] bg-[size:32px_32px]
Token
--texture-polka-dots: radial-gradient(color-mix(in oklab, var(--foreground) 10%, transparent) 3px, transparent 3px); --texture-polka-dots-size: 32px 32px;
Polka dots, answered
- How is the polka dots texture made in CSS?
- Polka dots 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 10% 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) 10%, transparent) 3px, transparent 3px) — 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 polka dots 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 polka dots 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 10% is quieter than the number suggests. Treat ten percent as the ceiling for a surface that carries text.