CSS Pattern Generator

How the CSS Pattern Generator works

CSS pattern generator: gradients that tile

A CSS gradient is an image, and like any background image it repeats. Combine a gradient that draws a hard-edged shape — a line, a dot, a triangle — with a background-size that sets the tile, and the browser tiles it across the element. Stack two or more gradients and offset them with background-position, and you get grids, checkerboards and zigzags. That is the whole technique; the six patterns in this tool are the ones that cover most real-world needs.

Stripes use repeating-linear-gradient, which repeats its colour stops without needing a background-size. The stops fg 0 4px, transparent 4px 24px mean a 4px stripe then a 20px gap, and the angle rotates the whole thing. Diagonal stripes at 45° are the classic "under construction" and progress-bar look; 90° gives vertical pinstripes.

Grid stacks a horizontal and a vertical linear gradient, each drawing a single line at the top or left of the tile. It is the standard graph-paper and blueprint background, and at a 1px thickness with a low-contrast colour it makes a subtle texture for dashboards.

Dots use a radial-gradient that is solid to a small radius and transparent beyond. The half-pixel overlap between the solid and transparent stops is deliberate: it anti-aliases the edge so the dots look round rather than jagged.

Checks are two identical 45° gradients, each drawing two opposite quarter-triangles of a tile, with the second offset by half the tile so the triangles complete each other into squares. The tile size sets the size of a pair of squares.

Zigzag is four diagonal gradients, one from each corner, positioned so the triangles align into a continuous chevron. Crosshatch is two repeating stripe gradients at +45° and −45°.

Why gradients rather than an image. A gradient background costs no network request, is resolution independent so it stays crisp on high-density screens, and can be recoloured or resized from CSS — including inside a prefers-color-scheme: dark block or on hover. An SVG data URI does all of that too, and is the better choice for shapes gradients cannot draw, such as hexagons or waves; the SVG data URI tool on this site covers that path.

Rendering notes. Hard colour stops at the same position produce a sharp edge, but on non-axis angles browsers anti-alias them slightly differently, so diagonal stripes may show faint seams at tile boundaries in some engines. Keeping the tile size an even number and the stripe thickness a whole pixel reduces it. Repeating gradients over very large areas are cheap to paint; stacking four gradients, as zigzag does, is still far lighter than a decoded image.

Using the output. The rule applies to any block element. For a full-page texture put it on body; for a card header, on the header. Combine it with a semi-transparent overlay gradient in the same background-image list to fade the pattern out towards one edge.

Related tools