A background at 1080 × 1920

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.

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.

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.

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.

• BgImageThe generator, opened on a design that is already drawn.
• 1920 × 1080The desktop screen figure, on the canvas when the page opens.
• GradientStops, an angle, and a choice about the space the ramp runs through.
• Why gradients bandEight bits, a long ramp, and the grain that trades one artefact for another.