Cut out and drawn on your machine.

A background at 1920 × 1080

The commonest screen figure there is, on the canvas from the first frame. Two point one megapixels, drawn and saved at that size and no other.

1920 × 108016:9 · 2.1 MP · desktop screen

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

WidthpxHeightpx

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

AcrossmmDownmmResolutionDPI

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 · 406 B of CSS

Dither: the file carries a dither against banding; a browser does its own rounding.

background-color: rgb(8 14 44); /* sRGB fallback */
background-image: radial-gradient(ellipse farthest-corner at 30% 25%, rgb(137 114 179) 0%, rgb(8 14 44) 100%); /* sRGB fallback */
background-color: oklch(0.18 0.06 270);
background-image: radial-gradient(ellipse farthest-corner at 30% 25% in oklch, oklch(0.6 0.1 300) 0%, oklch(0.18 0.06 270) 100%);
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. Gradient layer 1: an OKLCH ramp is written with a stop every 4%, because SVG blends in sRGB. 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.

This route is the generator with the size decided. Every other dimension is still a field away, and the number keys move between the six presets without touching the design.

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

WidthpxHeightpxNameText 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.

Fields that suit a screen

All forty

A centre and a falloff leaves the corners quiet, which is where icons stack and where a taskbar sits. These eight open at this size.

Why this figure earns a page

1920 by 1080 is the one dimension most people can say from memory, and it is asked for by name more than any other. It is the resolution of a mainstream desktop panel, the frame conferencing software wants, the canvas a slide deck exports at, and the size a video editor expects a still to arrive in.

Two point one megapixels is also a comfortable amount of work. The design is drawn in one pass, the export takes a moment rather than a wait, and a smooth ramp lands somewhere around a megabyte as a PNG with the dither on.

1920 × 1080 against the other screen figures
Size	Megapixels	Against 1920 × 1080
1366 × 768	1.0	half the pixels
1920 × 1080	2.1	the baseline
2560 × 1440	3.7	1.8 times
3840 × 2160	8.3	four times

Where the design should be quiet

A screen background is looked through rather than at. Whatever sits on top of it — icons, a dock, a window, a face in a call — needs somewhere with steady contrast to sit, and the commonest mistake in a generated background is putting the most interesting part of the frame exactly where the content goes.

The practical rule is to keep the region the content occupies within about one fifth of the lightness range, and let the frame do its moving elsewhere. A radial with its centre off to one side, or a linear ramp running corner to corner, both leave a large quiet area. A conic sweep does not, which is why it rarely makes a good desktop.

Two things this size will not fix

Matching the number does not mean matching the panel. A screen at a scaling factor other than one, an external display set to a non-native resolution, or a phone showing a desktop image will all resample the file again after you have done everything right here.
A file saved at 1920 by 1080 and then set as a lock screen, a call background or a slide fill is often re-encoded by that software at a quality you do not choose. Nothing at this end can prevent that; saving as PNG rather than JPG at least means the picture it starts from has no artefacts of its own.

Questions about this size

Is 1920 by 1080 still the right size for a desktop background?

For most screens in use, yes. It is the resolution of the largest share of panels sold in the last decade and the one every operating system handles without thinking. A higher-density laptop screen is usually 2560 by 1600 or 2880 by 1800 and will scale a 1920 image up by about a third, which on a smooth ramp is invisible. If the panel in front of you is 4K, make a 4K one instead; the key for it is 2.

Why does my wallpaper look slightly soft?

Almost always because the file is being scaled. A 1920 image on a 2560 panel is enlarged by 1.33, and the operating system does that with a resampler that smooths as it goes. Grain suffers most, ramps suffer least. Matching the panel exactly removes the scaling step entirely, which is the whole argument for naming the size rather than accepting a default.

What about the part hidden behind icons and a taskbar?

Nothing is hidden, strictly — the image is shown whole and things are drawn on top of it. What matters is contrast: a desktop icon has a light label and a dark outline, and both disappear over a mid-tone ramp. The safe pattern is to keep the top-left corner, where icons stack, near one end of the lightness range rather than in the middle of it.

Can I use this behind a video call?

Yes, and 1920 by 1080 is the size most conferencing software wants. Keep the middle of the frame quiet: a radial with its centre behind you, or a ramp running from a corner, both leave the area around a head flat, and flat is what stops compression artefacts crawling around your outline during a call.

Other ways in

Backgrounds made here: Chalk · Basalt · Copper line