Background Pattern Generator

about this tool

Patterns from gradients

Every pattern here is drawn with CSS gradients alone, no images. The trick is the hard colour stop: when two stops share a position the colour changes at once instead of blending, so a gradient becomes a shape. A repeating-linear-gradient from the ink to transparent at the stripe width, and transparent on to the period, draws stripes at any whole-degree angle. A radial-gradient in a tile set by background-size puts a dot in each tile; polka dots add a second layer shifted half a tile each way. A grid is two linear-gradient layers, one line each way per cell, and cross-hatching is two sets of stripes at 45° and 135°. A checkerboard is a repeating-conic-gradient that colours the top-right and bottom-left quarters of a tile two squares wide.

The declarations come out ready to paste into any rule, and the pattern repeats to fill whatever element carries it. Stripes and cross-hatching have no tile of their own: they start from the element's corner, so the same CSS lines up a little differently on boxes of different sizes. There is no image to download, it is sharp at any zoom and pixel density, and recolouring means changing a value rather than exporting a file.

Checked against its geometry

Each pattern also has a plain geometric definition in the code: a stripe is where the distance along the gradient line, as CSS Images 3 lays that line across the box, falls inside the stripe width modulo the period; a dot is within half its diameter of a tile's centre; a checker square is ink when its column and row numbers add up to an odd number. Each pattern was drawn once in Chromium, at sample sizes and angles, and compared pixel by pixel against those definitions away from the anti-aliased edges, and matched.

Dots fade from the ink to transparent over one pixel at their rim, since a hard edge on a curve comes out jagged; below about 3px across they come out as soft specks rather than crisp dots. Lines and squares use hard stops.

Limits

The size, meaning the stripe period, the dot or grid spacing, or the checker square, runs from 4 to 200 pixels; a checkerboard repeats every two squares. A stripe is held a pixel short of its period, grid and cross-hatch lines to half the cell, and a dot to where its rim stays a pixel from its neighbour's, so the pattern stays a pattern; the tool says when it holds one back, and when a typed number is out of range. Angles wrap round, so 270° is 270°.

Colours take the same notations as the CSS loader generator and are written the same way: hex for hex, names and rgb(), their own notation for the rest, and currentColor passed through. Inside a gradient, currentColor is the color of the element carrying the background. A transparent background leaves out background-color altogether. How smooth diagonal stripes and cross-hatching look depends on the browser; some show slight stepping on hard stops. Two-position colour stops and conic gradients need Chrome 71, Safari 12.1 or Firefox 83 or later.

Large, high-contrast stripes and checks can be uncomfortable to look at for some people, and make text on top harder to read; for a page background, keep the two colours close. Nothing is stored or sent anywhere.

questions

How do you make a pattern with only CSS?

With gradients that have hard colour stops, where two stops share a position so the colour changes at once instead of blending. A repeating-linear-gradient with ink from 0 to 6px and transparent from 6px to 20px draws 6px stripes every 20px. Dots are a radial-gradient in a tile set by background-size; a grid is two linear-gradients, one each way; a checkerboard is a repeating-conic-gradient that colours two quarters of each tile.

Why use CSS patterns instead of an image?

They cost no download and no request, stay sharp at any zoom or pixel density, and change colour or scale by editing a number rather than exporting a new file. The browser draws them, so type currentColor and the pattern follows the text colour, or swap a custom property into the copied CSS and it follows your theme. For patterns more intricate than stripes, dots and grids, an SVG tile is the better tool.

How is the rendered pattern checked?

Each pattern also has a plain geometric definition: a stripe is the points whose distance along the gradient line, taken modulo the period, is under the stripe width; a dot is the points within half its diameter of the tile centre. Each pattern was drawn once in Chromium at sample sizes and angles and compared pixel by pixel with that definition, away from the anti-aliased edges, and matched.

Why do the dots have a soft edge but the stripes do not?

Hard stops give a crisp edge on horizontal and vertical lines, which is what a grid or checkerboard wants. On a curve they give a jagged staircase, so each dot fades from the ink to transparent over one pixel at its rim. Diagonal stripes use hard stops too, so how smooth their edges look depends on the browser; some show slight stepping.

Can the background be transparent?

Yes. Set the background to transparent and no background-color is written, so the pattern lies over whatever is behind the element: a photo, a gradient, or the page. The pattern colour can carry transparency too, as hex with alpha or rgb(), hsl(), oklch() and the others with a / alpha, for a subtle texture over a solid colour.