BgImageAll tools
Cut out and drawn on your machine.

Make a plain colour background

One colour, one pair of dimensions, one file. The stack is put away on this route because there is nothing to stack.

white ground. 1920 × 1080 pixels.

Ground

Everything above sits on this. A layer with any transparency in it takes its shade from here.

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

background-color: rgb(249 248 246); /* sRGB fallback */
background-color: oklch(0.98 0.003 95);

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.

The ground colour is the whole design here. Everything else — layers, seeds, the dither pass — belongs to the routes that need them and would only be furniture on this one.

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.

Eight colours worth having

All forty

Plain white and near-black are the two most asked for, and both are here at the values that behave rather than at the extremes. Pure white on a screen is harsh and pure black hides its own edges, so these sit one step inside each.

The colour is easy; the size is the question

A request for a plain background is almost never really about the colour. The colour takes a second. What takes the time is that the thing receiving it wants 1200 by 630, or 2480 by 3508, or whatever the panel behind the desk happens to be, and a file of the wrong dimensions gets stretched, cropped or rejected.

So the dimensions sit beside the download here, the six common figures are a keypress away, and any other pair can be typed. If the destination is physical — a sheet, a card, a print — the panel under the size fields takes millimetres or inches with a resolution and works out the pixels, because a physical measurement without a resolution beside it is not a measurement.

Flat colour is the one case where format is obvious

Compression works by finding repetition, and a flat colour is nothing but repetition. PNG stores it as a run and the file is trivially small; JPG breaks the same image into blocks and encodes each one, which is more work for a worse result; WebP sits between the two and is smaller than PNG on a large flat area but needs a browser that writes it.

A 1920 × 1080 flat colour, measured by this page's own estimate
FormatTypical sizeWorth choosing when
PNGa few kilobytesalmost always
WebPa few kilobytesyou control where it is opened
JPGtens of kilobytessomething downstream insists on it

The figure beside the download control is not from this table. It is measured by encoding a small copy of the design you are actually looking at and scaling by the pixel count, so it moves when you move a control.

What a plain file does not fix

  1. A white file is not a white background for a photograph of a person. Putting one behind somebody means separating them from what is already behind them first, and nothing here can do that or has any way to read the photograph in the first place. This route makes the white rectangle, at whatever size that other job needs it.
  2. Every file from this site is opaque. There is no alpha channel to switch on, because the ground colour is painted before anything else is drawn, so a plain colour here cannot stand in for a transparent one.

Questions about plain colours

Why would anyone download a plain colour rather than draw a rectangle?
Because a great many things take an image file and will not take a colour. A slide template, a video editor's background track, a printer's proof sheet, a placeholder in a layout, a test card for a display, a fill behind a logo in software that has no fill tool. In every one of those the answer is a file of a stated size in a stated colour, and making one by hand in an image editor takes longer than it should.
What does a plain white file weigh?
Almost nothing as a PNG. A 1920 by 1080 flat colour is a few hundred bytes, because the compressor finds two million identical pixels and stores the fact rather than the pixels. The same image as a JPG is larger, often by a factor of twenty, since that format is built to lose detail rather than to find repetition. For a flat colour, PNG is not a preference, it is the right answer.
Is the colour I get exactly the hex I typed?
Yes, for any value that fits in sRGB, which is every six-digit hex code. The value is converted into the perceptual space the rest of the tool works in and back again on the way out, and that round trip is exact to the byte for an eight-bit channel. What the screen shows depends on its own profile and calibration, which nothing in a file can control.
Can I get a transparent background instead of a colour?
Not from this page. Every export here is opaque: the ground colour is painted first and the layers sit on it, so there is no alpha to carry. A transparent file is what you want when something is going on top of it, which is a compositing job rather than a background one, and it is not what this site makes.

Other ways in

Three backgrounds from the library: Copper line, Dusk field, Paper white.

Backgrounds made here: Copper line · Dusk field · Paper white