CSS Patterns & Textures Effects

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.

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.

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.

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.

Two fine violet line screens overlap at a slight angle to form moire waves that shift as they twist on hover.

Sixteen coloured paper flecks scattered at unrepeating angles across a dark ground, for a celebratory surface texture.

A woven tartan sett built from one asymmetric band group crossed over itself, so the navy blocks, pale checks and thin yellow over-check darken and brighten where they overlap.

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

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.

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.

Amber sunburst rays from a repeating conic gradient rotate slowly around a glowing centre disc.

Classic houndstooth check woven from four offset diagonal gradients, slate teeth on a bone-white ground.

A sawn timber board whose grain is drawn from three horizontal line periods that never line up, with a ringed knot swirling near the right edge.

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

Op-art squares nesting outward in deepening violet, drawn entirely from spreading box shadows and turning as they breathe.

A galvanised corrugated sheet where each ridge is shaded from trough to highlight and back, with a row of dark rivets pinned along the top and bottom edges.

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

Brushed metal tread plate with raised diamond studs picked out by paired highlight and shadow gradients.

Padded upholstery in which two crossing stitch lines cut the surface into diamonds and every diamond swells with its own highlight and shadow.

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

Dark carbon-fiber weave texture from offset radial dots with a faint highlight, tagged with an emerald label.