BgImage
Upload a picture
Cut out and drawn on your machine.

Make a wallpaper for every screen

One design, drawn at every phone and desktop size at once, with the clock and text zone of each measured in the file that was written.

mesh of five colour points, over a blue ground. 1080 × 1920 pixels.

Every screen from one design, measured where the clock and the text go

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.

  • QHD screen 2560 × 1440

    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.

  • Tall phone screen 1179 × 2556

    Text zone: lock-screen clock

    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.

1080 × 19209:16 · 2.1 MP · phone 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 91.4 by 162.6 millimetres.

1080 × 1920 · 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

1080 × 1920 · 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 1080 × 1920, 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: 1080 × 1920, 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.

Each wallpaper is drawn at its own dimensions by the export renderer. The single file below is for one size at a time; the set above is the whole job.

One design, every screen, read where the clock goes

A wallpaper is wanted at several sizes at once — the phone, the laptop, the big monitor — and each one puts something on top of it in a different place. A phone puts the clock and the date in the top fifth, which is exactly where a ramp that is dark at the bottom is at its palest. A design that looks right on the desktop can lose the clock on the phone.

So the sizes here are drawn separately, each at its own pixels, and each file is decoded again after it is written so the pixels in its text zone can be measured. The answer per size is the colour the clock or the text should be, the contrast it keeps, and the scrim that would rescue it if it falls short.

Limits

  1. Phone makers move the clock and widgets between versions; the zone is the common top fifth, not your phone's exact layout.
  2. Very large sizes are drawn in bands, which takes a few seconds per file on a phone.

Questions people ask

Is each size a resize of one big file?
No. Every size is drawn by the renderer at its own pixel dimensions, so a phone wallpaper is drawn at 1080 × 1920 rather than cropped from a desktop image. Gradients keep their proportions to each frame and grain is counted in that file's own pixels.
What is the contrast number on each size?
Each file is opened again after it is written, and the pixels where text will sit are read — the clock in the top fifth of a phone, the middle of a desktop. The row says whether white or black text holds better there, the ratio it keeps against 95% of those pixels, the single worst pixel, and the scrim that would make up any shortfall. It is a measured ratio in that zone, not a promise about the rest of the screen.
What is in the ZIP?
One image per size, named for where it goes and how big it is; contrast-report.txt with every measurement in words; text-contrast.csv with the same numbers as a sheet; and the CSS where the design has a CSS form.
Can I add my own phone's size?
Yes. 'Add a size of your own' takes a width, a height, a name and which text zone to measure — top fifth for a lock screen, centred, down the left, lower third or the whole frame.
Does anything get uploaded?
No. There is no picture to upload: the design is numbers, drawn by your browser, and the files are written straight to your disk.

Other background jobs

Three backgrounds from the library: Harbour, Cyan cut, Paper grain.

Made here, from numbers: Harbour · Cyan cut · Paper grain