CSS background patterns

A dot screen set at the print angle, its dots sized by a travelling wave. At 0 degrees it reads as a table of dots; at 23 it reads as tone.

A ruled grid where the space bends toward the pointer, not the lines. Two cells away the grid is exactly where it was.

A lattice of dots swelling with two waves — a slow one from the centre and a tight ring that arrives with the pointer. Each dot samples at its own cell, so it stays a grid.

Evenly spaced blue dot grid that drifts diagonally — a calm canvas background.

Barber-pole stripes in ocean sliding continuously across the surface.

Two-tone ocean checkerboard that shuffles half a tile back and forth.

Blueprint grid with blue minor and major rules — four gradients, no images.

Contour-map rings in ocean tones, slowly expanding like a breathing landscape.

Blue surface under animated film grain — hides gradient banding and adds the analog texture flat color lacks.

Blue dot field dissolved at the edges by a radial mask — the section background that never competes with the text on it.

Crossing ocean rules forming a plus lattice, masked to fade at the edges and slowly panning.

Four sheared gradients offset by half a tile into an interlocking cube lattice — one element, no SVG, and it tiles seamlessly at any size.

Two opposed diagonal repeats crossing into a basket weave, drifting against each other so the surface shimmers without any element moving.

Hexagonal lattice from two offset radial gradients and a rule — a tiling CSS cannot draw directly, faked with half-cell offsets.

Orthogonal tracks with solder pads at the junctions, on two grid scales so the vias land between the crossings rather than on them.

Offset diamond blocks crossed by two thin repeating diagonals, which is what separates argyle from a plain checkerboard on the bias.

Seven elliptical chips at irregular positions inside one tile, sized differently so the repeat is much harder to spot than a regular grid.

Interlocking arcs from two offset radial layers, the half-cell stagger doing the overlap that makes a scale pattern read as roofing rather than as rows of circles.

Two mirrored diagonal stripe fields butted at the centre line, which is the whole trick — herringbone is one hatch and its reflection sharing a seam.

Running bond where the half-course offset comes from a second layer at double the cell size, so the staggered joints fall out of the geometry rather than being drawn.

Equilateral tiling from four 60-degree gradient layers on a half-cell offset, the 59px row height being what keeps the triangles equilateral rather than merely pointy.

Teal zigzag chevron stripes built from four layered gradients that slide sideways on hover.

Two sets of concentric sky-blue rings overlap like raindrops on water, brightening on hover.

Lime cross-hatched pen strokes at 45 degrees; the weave tightens as the tiles shrink on hover.