BgImageAll tools
Cut out and drawn on your machine.

A background at 1080 × 1920

The upright frame, at the size a phone screen and a full-bleed story both use. The long axis is the vertical one, and that changes what a ramp has to do.

linear gradient, two stops, indigo to deep violet, over a deep violet ground. 1080 × 1920 pixels.

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

  • Dither: the file carries a dither against banding; a browser does its own rounding.
background-color: rgb(20 12 56); /* sRGB fallback */
background-image: linear-gradient(210deg, rgb(58 117 175) 0%, rgb(20 12 56) 100%); /* sRGB fallback */
background-color: oklch(0.2 0.08 285);
background-image: linear-gradient(210deg in oklch, oklch(0.55 0.11 250) 0%, oklch(0.2 0.08 285) 100%);
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. 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: 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.

The stage is wider than the design here, so the canvas is matted on both sides rather than cropped. What is inside the frame is the whole file.

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.

Dark starts for an upright screen

All forty

A dark top keeps the clock and the status icons legible, and a dark background costs a phone panel less to display. These eight open upright at this size.

An upright frame is a different problem

Turning a background on its side is not a rotation of the same design. The content that sits on a phone screen is arranged down the frame rather than across it: a clock at the top, a row of icons at the bottom, and a long empty middle. A ramp that ran corner to corner on a desktop puts its brightest region exactly where the clock goes.

The reliable shape here is a vertical ramp with its dark end at the top, or a radial with its centre low in the frame. Both leave the status area at one end of the lightness range and the home row at the other, which is what keeps white text legible without a scrim over it.

What sits where on an upright 1080 × 1920 frame
BandRowsWants
Status and clock0 – 380one end of the lightness range
Wallpaper middle380 – 1450anything
Home row and dock1450 – 1920steady, not busy

The long axis costs you levels

Banding is a question of how many pixels a ramp has to cross against how many levels it has to cross them with. An eight-bit channel offers 256 steps whichever way the frame is turned, so a ramp running down 1920 rows repeats each step about seven and a half times, against four and a bit for the same ramp running across 1080 columns.

That is why the upright presets here all ship with the dither pass on, and why switching it off on this route makes the difference obvious in the preview rather than only in the file. A steeper ramp — one that crosses more lightness in fewer rows — buys the same thing for nothing.

Two limits worth knowing before you set it

  1. Almost no modern phone is exactly nine by sixteen, so the file will be scaled and cropped a little whatever it says here. Typing the panel's real resolution into the width and height fields removes that step; the six presets cannot, because there is no single figure that fits every handset.
  2. A phone that offers a depth or parallax wallpaper will move the image behind the clock as you tilt it, and a design that was quiet under the status bar when you set it may not stay quiet. Nothing at this end controls that; a flatter top third is the only defence.

Questions about upright backgrounds

My phone is not 1080 by 1920. Does this still work?
Yes, and it is the usual case now. Phone panels run taller than sixteen by nine — nineteen and a half by nine is common — so a 1080 by 1920 image is scaled up slightly and cropped a little at the top and bottom. A ramp survives that without anyone noticing. If you want an exact match, read the resolution in the phone's settings and type those two numbers into the fields.
Where do the clock and the notifications sit?
At the top, over roughly the first fifth of the frame, in white on most systems and with no outline. That is the one region a phone background has to get right: anything light up there makes the clock disappear. A vertical ramp that runs dark at the top and light at the bottom solves it in one control, which is why the design this page opens on does exactly that.
Is this the same size as a story or a reel?
Yes. 1080 by 1920 is the nine by sixteen frame those formats use, so one file covers a phone wallpaper and a full-bleed story background. What differs is what goes on top: a story usually carries text in the middle third, so keep that band flat if the file is going to be published rather than worn as a wallpaper.
Why does a vertical gradient band more than a horizontal one?
Because it has further to go. A ramp across 1920 pixels of height has to cross the same 256 available levels as one across 1080 pixels of width, so each level is repeated nearly twice as often and the steps are twice as wide. Upright frames are where the dither pass earns its place, and it is on by default here for that reason.

Other ways in

Three backgrounds from the library: Moss bed, Rust field, Woven grid.

Backgrounds made here: Moss bed · Rust field · Woven grid