Flickering Grid — Free HTML CSS JS Canvas Texture Snippet

The flickering grid is the subtle, techy backdrop where a lattice of small squares flickers to random opacities — never the same twice, always quietly alive. It is a favorite ambient texture for AI, data, and developer sites. This snippet renders it on an HTML <canvas> with plain vanilla JavaScript, sharp on retina and efficient even with hundreds of cells.

A grid stored as a typed array

The grid is computed from cell SIZE and GAP: the canvas is divided into as many columns and rows as fit, and each cell's current brightness is stored in a Float32Array indexed by row * cols + col. A typed array is used deliberately — it holds the brightness of every cell in a compact, fast-to-iterate buffer, which matters because the draw loop touches every cell each frame. The array is seeded with random starting opacities so the grid is varied from the first frame.

The flicker logic

Each frame, a small fraction of cells (governed by FLICKER) are chosen at random to jump to a new random brightness, while the rest hold their current value. Redrawing every cell at its stored opacity then produces the flicker: most cells stay put on any given frame while a scattered few change, so the texture shimmers gently rather than strobing. Capping brightness at MAXA (0.55) keeps it subtle — a backdrop, not a distraction.

Drawing efficiently

The loop clears the canvas and fills each cell as a small fillRect at its opacity, skipping cells dimmer than a threshold so near-invisible squares cost nothing. Drawing solid rects (rather than per-cell gradients or shadows) keeps each frame cheap, which is what lets a few hundred cells animate at 60fps. The whole grid is one canvas, so it is a single element regardless of cell count.

Crisp on retina

Like any canvas, it scales with devicePixelRatio (capped at 2): the backing buffer is sized up and a setTransform lets drawing happen in CSS pixels while rendering at device resolution, so the square edges stay sharp on HiDPI screens. The grid rebuilds on resize to fit the new dimensions and recomputes the cell count.

Framing the content

A radial .fg-fade vignette darkens the grid toward the edges so the flicker emerges from darkness and the lattice does not end abruptly, keeping focus on the centered headline. The content sits above the canvas at a higher z-index with a soft text-shadow for legibility.

Customizing it

Change SIZE and GAP for a finer or chunkier grid, FLICKER for a busier or calmer shimmer, MAXA for brighter or subtler squares, and COLOR for any hue. Lower the DPR cap or raise the skip threshold for very low-end targets. Pair it with a dot pattern or particle network for a layered technical hero, or an aurora text headline on top.