Dot Pattern — Free HTML CSS JS Dotted Background Snippet

The dot pattern is the understated technical backdrop on infrastructure and developer sites: a faint grid of dots, calm at rest, with a soft glow that follows your cursor and lights up brighter, colored dots in its radius. This snippet builds the whole thing with pure CSS backgrounds and masks, plus two lines of JavaScript to move the spotlight — no canvas, no images.

The dot grid in one element

The base dots are a single radial-gradient — a 1px white dot over transparent — tiled across the hero with background-size: 22px 22px. That repeats the dot on a regular grid, giving graph-paper dots from one background declaration. A mask-image radial gradient then fades the dots toward the edges so the pattern dissolves into the page rather than ending at a hard border, keeping focus on the center.

The cursor spotlight

The interactive glow is a second dot layer, .dp-spot, identical in tiling but in a brighter accent color. It is revealed through a mask-image radial gradient whose center is driven by two CSS custom properties, --x and --y. A pointermove handler writes the cursor position into those variables, so the masked circle — and therefore the brighter dots — follows the pointer. Outside the circle the layer is masked away, so you only see the accent dots within the spotlight. The layer fades in on hover so the hero is monochrome and calm until you interact.

Two layers, one illusion

The effect of "dots lighting up under the cursor" is really two stacked dot grids: the faint base always visible, and the bright accent grid revealed only inside the moving mask. Because both share the same 22px tiling, the bright dots line up exactly over the faint ones, so it reads as the same dots brightening rather than a separate layer. This alignment is what sells it.

Cheap and smooth

There is no per-frame JavaScript — the handler only sets two CSS variables, and the browser composites the masked gradient move on the GPU. So the spotlight tracks the cursor smoothly with negligible cost, even on a large hero. The content sits above with pointer-events: none (except where you need clicks), so moving over the headline still lights the dots beneath.

Why masks beat redrawing

Some implementations redraw dots on a canvas each frame to brighten those near the cursor. Masking a pre-tiled gradient is far cheaper and pixel-perfect: the dots never shift, and the only thing moving is a mask center, which is a single composited property. It also scales to any hero size without more work.

Customizing it

Change background-size for a denser or sparser grid, the dot color and size, the spotlight radius (the 200px circle in the mask), or the edge-fade mask shape. Recolor the accent dots to your brand. Pair it with an aurora text headline or a particle network for a layered, modern hero.