Free tool
CSS dot grid background generator
Build a dotted background with pure CSS: pick the dot size, spacing and color, then add soft glows. Copy the result as CSS custom properties, Tailwind arbitrary values or a React component. Everything runs in your browser; no images and no uploads.
Background settings
dot-grid.css
.dot-grid-bg {
--dot-size: 2.6px;
--dot-gap: 28px;
--dot-color: #8d9bc0b3;
--dot-bg: #f3f5fb;
--glow-1: #8ba0ee8c;
--glow-2: #76aee273;
background-color: var(--dot-bg);
background-image:
radial-gradient(
circle at center,
var(--dot-color) calc(var(--dot-size) / 2),
transparent calc(var(--dot-size) / 2 + 0.6px)
),
radial-gradient(48% 48% at 0% 100%, var(--glow-1), transparent),
radial-gradient(46% 46% at 100% 70%, var(--glow-2), transparent);
background-size: var(--dot-gap) var(--dot-gap), 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat;
}Components that use this background
These Dev.cards components are built on a dot grid. Each one ships complete Vanilla HTML/CSS/JS and React source you can copy.
- Prompt composerCadenza Print
A pale dot grid with two soft blue glows behind a frosted composer card.
View component - Location directoryOpen Yard
A fine navy dot grid under a directory of fictional maker spaces.
View component - TestimonialPlainsight
A faint dot texture on a proof card inside a warm customer story.
View component - FooterHarborline
A halftone dot band around the closing call to action of a dark footer.
View component
How a CSS dot background works
A dot grid needs no SVG or image file. One small radial gradient draws a single dot, and background-size repeats that tile across the element.
One gradient, repeated
radial-gradient(circle at center, color 1px, transparent 1.6px) paints a dot with a 1px radius. The extra 0.6px gives the edge a little anti-aliasing so dots stay round on every screen. background-size: 24px 24px sets the spacing of the grid.
Soft glows on top
Each glow is another radial gradient layer with an elliptical size and a position, fading to transparent. Glow layers use no-repeat, so they tint one part of the grid while the dots keep repeating.
Tailwind CSS dotted background
Tailwind has no dot-grid utility, so the generator uses arbitrary properties such as [background-size:24px_24px]. Underscores stand for spaces. The classes work in Tailwind v3.2 and later and in v4, without a config change.
Custom properties and edge fade
The CSS output exposes --dot-size, --dot-gap, --dot-color and one variable per glow, so you can theme the grid or switch it in dark mode. The edge fade adds a top layer that blends into the background color, so content inside the element is never masked.