BgImageAll tools
Cut out and drawn on your machine.

Build a pattern background that repeats exactly

The opening blueprint is a grid layer over a flat blue. Change the motif, the cell, the ink and the angle, or add more pattern layers.

pale indigo grid every 40 pixels, over a indigo ground. 1920 × 1080 pixels.

1920 × 108016:9 · 2.1 MP · desktop screen

No picture goes in. This is the size that comes out.

File format

Try it behind something

Drawn over the preview and never into it. No file this page writes has ever contained the sample.

Set the size in millimetres or inches
Unit

A physical size is a claim about paper, so it needs the resolution beside it. At 300 DPI this canvas prints 162.6 by 91.4 millimetres.

1920 × 1080 · 2.1 megapixels

The CSS

Exact construction · 852 B of CSS

background-color: rgb(17 61 112); /* sRGB fallback */
background-image: repeating-linear-gradient(90deg, rgb(199 226 246 / 0.3) 0px, rgb(199 226 246 / 0.3) 2.4px, rgb(199 226 246 / 0) 2.4px, rgb(199 226 246 / 0) 40px),
                  repeating-linear-gradient(180deg, rgb(199 226 246 / 0.3) 0px, rgb(199 226 246 / 0.3) 2.4px, rgb(199 226 246 / 0) 2.4px, rgb(199 226 246 / 0) 40px); /* sRGB fallback */
background-color: oklch(0.36 0.1 255);
background-image: repeating-linear-gradient(90deg, oklch(0.9 0.04 240 / 0.3) 0px, oklch(0.9 0.04 240 / 0.3) 2.4px, oklch(0.9 0.04 240 / 0) 2.4px, oklch(0.9 0.04 240 / 0) 40px),
                  repeating-linear-gradient(180deg, oklch(0.9 0.04 240 / 0.3) 0px, oklch(0.9 0.04 240 / 0.3) 2.4px, oklch(0.9 0.04 240 / 0) 2.4px, oklch(0.9 0.04 240 / 0) 40px);
background-repeat: no-repeat;
background-size: cover;

The file

1920 × 1080 · PNG

Drawn by the same renderer as the preview, at the dimensions above rather than the preview’s. The sample content is not in it.

Vector, the same construction as the canvas, viewBox 1920 × 1080, no external references.

The recipe

A small JSON file holding the design and the numbers that decide what comes out of it: 1920 × 1080, PNG, 300 DPI, plus a fingerprint of the design drawn small so a later build can tell whether it still draws the same. The link in the address bar carries the design, the size and the format.

Recipe format version 2, renderer 2.0.0. A file written by a newer version is refused by name rather than half-applied, and the canvas is left as it was.

Pattern cells are counted in output pixels, so the repeat in the file is exact. Stack two pattern layers at different cells for a finer and a coarser grid.

Every size at once, read where its text goes

Each size is drawn at its own pixels by the export renderer, then opened again and read inside its own text zone — the clock on a phone, the title down the left of a link card, the safe area of a channel banner. The same ramp can carry white text on one and lose it on the next; the row says which.

Sizes · 6 of 12

Add a size of your own, with a named text zone
Text on top
Contrast to hold

  • Desktop screen 1920 × 1080

    Text zone: centred headline

    Waiting.

  • Four-K screen 3840 × 2160

    Text zone: centred headline

    Waiting.

  • Ultrawide screen 3440 × 1440

    Text zone: the middle third, where the eye rests

    Waiting.

  • Phone screen 1080 × 1920

    Text zone: lock-screen clock

    Waiting.

  • Link preview card 1200 × 630

    Text zone: title down the left

    Waiting.

  • Profile banner 1500 × 500

    Text zone: right of the avatar

    Waiting.

Held means the ratio holds against 95 per cent of the zone’s pixels; the worst pixel is shown beside it so grain and hard edges are not hidden. White text is pure white (255, 255, 255), black is pure black (0, 0, 0), and the scrim is a flat layer of the opposite colour behind the text. The archive also holds contrast-report.txt and text-contrast.csv with every number here, and background.css.

Five motifs, one rule

Dots, grid lines, stripes, checks and waves are all drawn from the same rule: a value computed from the pixel position modulo the cell, with a one-pixel soft edge so lines and dots do not stair-step. Because the rule is periodic, the pattern is too — there is no tile image being stamped and no seam to hide.

The ink slider is how much of each cell the motif takes: the width of a stripe or grid line, the diameter of a dot. For a quiet page background keep it low and lower the layer opacity before changing the colours; contrast is what makes a pattern compete with text.

What this construction is not

  1. Tile mode — exporting one seamless tile with a repeat preview — is not offered yet; export the full size you need.
  2. Very fine cells can alias when the file is reduced. Export at the final dimensions rather than shrinking later.
  3. A pattern behind body text needs a flat-enough region or a text panel. Decoration does not excuse low contrast.

Questions people ask

Does the pattern repeat exactly?
Yes, by construction. Every value is a function of the pixel position modulo the cell, so at 0° the motif repeats every cell (every two cells for checks and waves) in output pixels. At other angles it is still periodic, along the rotated axes.
Is the CSS the same as the file?
For dots, grid, stripes and checks at 0° it is the same construction: repeating gradients with a background size of one tile. Rotated tiles are written square to the frame and labelled approximate. Waves have no CSS form and are listed as left out.
Where did the woven grid go?
It is still in the library and opens from its old links. The pattern route now opens on a grid built from the pattern layer, which is the construction that repeats exactly and exports to SVG.

Other background systems

Three backgrounds from the library: Pine dusk, True black, Peat.

Backgrounds made here: Pine dusk · True black · Peat