BgImageAll tools
Cut out and drawn on your machine.

Build a mesh gradient from colour points

Five colour points pull the surface toward their colours. Select the mesh chip and drag any point on the preview, or add up to nine.

mesh of five colour points, over a blue 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

Approximation · 1 KB of CSS

  • Mesh layer 1: a browser cannot mix colour points, so it is written as 5 soft spots over the mesh's average colour.
  • Dither: the file carries a dither against banding; a browser does its own rounding.
background-color: rgb(73 137 167); /* sRGB fallback */
background-image: radial-gradient(circle farthest-side at 12% 15%, rgb(133 228 227) 0%, rgb(133 228 227 / 0) 70%),
                  radial-gradient(circle farthest-side at 88% 12%, rgb(164 149 240) 0%, rgb(164 149 240 / 0) 70%),
                  radial-gradient(circle farthest-side at 10% 88%, rgb(131 212 148) 0%, rgb(131 212 148 / 0) 70%),
                  radial-gradient(circle farthest-side at 90% 85%, rgb(57 138 214) 0%, rgb(57 138 214 / 0) 70%),
                  radial-gradient(circle farthest-side at 52% 50%, rgb(247 230 195) 0%, rgb(247 230 195 / 0) 70%),
                  linear-gradient(rgb(150 193 208), rgb(150 193 208)); /* sRGB fallback */
background-color: oklch(0.6 0.08 230);
background-image: radial-gradient(circle farthest-side at 12% 15%, oklch(0.86 0.09 195) 0%, oklch(0.86 0.09 195 / 0) 70%),
                  radial-gradient(circle farthest-side at 88% 12%, oklch(0.72 0.13 290) 0%, oklch(0.72 0.13 290 / 0) 70%),
                  radial-gradient(circle farthest-side at 10% 88%, oklch(0.8 0.12 150) 0%, oklch(0.8 0.12 150 / 0) 70%),
                  radial-gradient(circle farthest-side at 90% 85%, oklch(0.62 0.14 250) 0%, oklch(0.62 0.14 250 / 0) 70%),
                  radial-gradient(circle farthest-side at 52% 50%, oklch(0.93 0.05 85) 0%, oklch(0.93 0.05 85 / 0) 70%),
                  linear-gradient(oklch(0.786 0.0506 221.36), oklch(0.786 0.0506 221.36));
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, approximate, viewBox 1920 × 1080, no external references. Mesh layer 1: the mesh is written as soft spots over its average colour; SVG cannot mix colour points. Dither is not in the SVG; it belongs to an eight-bit file, and a vector has none.

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.

The mesh is a layer of colour points, not a flattened picture. Every point stays draggable; the file is drawn from the points at its own size.

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.

Points, not blobs

A mesh gradient is a surface where colour is pinned at a few places and flows smoothly between them. Here that is literal: each point carries a colour and a position, and every pixel is the distance-weighted mix of all of them, computed in OKLab so the in-between colours keep their lightness and chroma. Moving one point reshapes the whole field rather than sliding one blob over another.

Select the mesh chip and the points appear as handles on the preview. Drag them, or use the arrow keys on a focused handle. Softness, in the layer panel, decides whether the colours stay as distinct pools or blend into one wash.

Where meshes go wrong

  1. Five saturated points far apart in hue can make the middle busy. Lower the chroma of one before adding another point.
  2. A browser cannot draw a true mesh, so the CSS is an approximation; use the file when the exact surface matters.
  3. Points very close together make a hard seam between their colours; spread them or raise the softness.

Questions people ask

What makes this a true mesh?
Every pixel is a weighted mix of all the colour points, the weight falling with distance, and the mix is taken in OKLab so two far-apart hues meet through a colour rather than a grey. Drag a point on the preview and the whole surface follows. The older construction — soft radial layers stacked over each other — is still in the library as Aurora mesh, and old links to it open exactly as before.
Can I copy it as CSS?
As an approximation, and the panel says so. A browser cannot mix colour points, so the declaration is written as soft radial spots over the mesh's average colour. The file is the exact one; the CSS is labelled approximate and lists why.
How many points can a mesh have?
Four to nine. Softness decides how far each one reaches: low keeps each colour as a pool around its point, high washes them into one another.

Other constructions

Three backgrounds from the library: Sand drift, Cold steel, Terracotta.

Backgrounds made here: Sand drift · Cold steel · Terracotta