Make a background image

Everything on this page is drawn from numbers. There is no photograph anywhere in it, no place to put one, and no code that could read one — a background comes out of a base colour, a stack of layers and a pair of dimensions, and nothing else goes in. That is a narrower product than it sounds, and it is the reason the dimension field is a first-class control rather than an export option.

The thing most tools get wrong is treating the size as the last question. A background exists to be exactly some number of pixels: the panel it sits behind, the card a link preview crops to, the sheet it will be printed on. So the size sits in the action bar next to the download, six common figures are one keypress away, and any other pair of numbers can be typed. A physical size with a resolution beside it resolves to pixels in the same control.

A design is a ground colour with layers over it. Most are two or three; the ceiling is eight, past which the preview stops being interactive and the result stops being a background. Each layer carries a blend mode, an opacity and a seed, and the order is yours to change.

A gradient layer is a shape, an angle and a list of stops, interpolated in OKLCH by default. A flat layer is one colour, which is more useful than it sounds once a blend mode is on it — a multiply of a warm tone over a cold ramp costs one layer and changes the whole surface. A noise layer is a value per pixel or per cell, usually at a low opacity over everything else, and it is what stops a generated background looking generated.

Every generative layer shows its seed in the toolbar. Rolling it again replaces that layer’s parameters with a new set derived from a new number, and the design in the address bar keeps up, so a link reproduces what is on the canvas rather than a design that happens to share a seed with it.

G S N

add a gradient, a flat colour or a noise field

R

roll the selected layer again

Shift R

roll every layer in the stack

D

turn the dither pass on and off

1 – 6

jump to one of the six output sizes

Enter

draw at full size and save

Ctrl Z

step back through fifty changes, Shift to step forward

The canvas shows the design at roughly a quarter of the pixels it will be saved at, and half of that again while a slider is moving. That is a deliberate trade: a 4K design is eight million pixels through a per-pixel loop, and computing all of them on every frame of a drag would make the control feel broken. The renderer is the same one either way, and geometry is measured in fractions of the frame, so what you approve is what you get.

One thing genuinely differs. Grain is counted in output pixels, so a one-pixel cell in a 3840-wide file is drawn as a one-pixel cell in a 1400-wide preview and therefore looks about three times coarser on screen than in the file. That is stated beside the control rather than left to be discovered after a download.

Above about thirty megapixels the export stops being one allocation the browser will make happily, so it is drawn in horizontal bands instead. The page asks first, says how many bands, and produces a file identical to the one a single pass would have produced — every value in the renderer is a function of the absolute pixel coordinate, so a band boundary leaves no seam. Past a hundred megapixels the canvas cannot be allocated at all and the export is declined with the measured figure named.

Both are limits of the operation, not of this build.

1. Banding cannot be removed from an eight-bit file, only traded. A long flat ramp has fewer available levels than it has pixels to cross, and no amount of care in the renderer changes that — the dither pass swaps a visible step for about one level of noise, which is a better artefact but is still an artefact. A ramp that has to be perfectly smooth needs a format with more than eight bits per channel, and none of the three formats offered here has one.
2. No photograph is ever read. There is no file input on this site, no decoder in its code and nothing that inspects an image you already have, which means a colour cannot be lifted from a picture you drop and a background cannot be placed behind anyone. What comes out is a rectangle of manufactured pixels; anything involving a photograph, including putting one of these behind a person, happens somewhere else entirely.

How big should a desktop background be?

1920 by 1080 still fits more screens than any other figure, and it is the first preset here for that reason. A high-density laptop panel is usually 2560 by 1600 or 2880 by 1800, and a large external display is 3840 by 2160. Going larger than the panel costs file size and buys nothing; going smaller means the system stretches the image, which on a smooth ramp is invisible and on grain is not. When in doubt, match the panel you are looking at.

Why does my gradient come out in stripes?

Because eight bits per channel gives 256 steps, and a ramp stretched across 1920 pixels has to repeat each step about seven times. The eye finds the repeats and reads them as bands. The dither control replaces that boundary with about one level of noise, which the eye reads as texture rather than as a stripe. It is on by default on every ramp in the library, and switching it off makes the stripes visible again in the preview immediately.

Can I take the CSS rather than the file?

Yes, and for a web page it is usually the better answer: a declaration scales to any viewport, weighs nothing and changes without a deploy. The copy control hands over the whole block, stops, angle and interpolation space included. It is switched off while a noise layer is in the stack, because noise has no CSS form and a declaration that quietly dropped it would not be the design you approved.

What is OKLCH actually doing to the ramp?

Keeping the middle of it where you would expect. Interpolating blue to yellow through the encoded sRGB channels drives the midpoint towards a muddy grey, because those channels are not perceptually even. OKLCH interpolates lightness, chroma and hue separately, so the midpoint stays as saturated as the ends and the ramp keeps its colour the whole way. On two colours that are already close in hue, the two spaces produce almost identical output, and the control lets you see that rather than take it on trust.

PNG, JPG or WebP for a background?

PNG for anything flat or nearly flat, because a run of identical pixels compresses to almost nothing. JPG for a large photographic-looking field where a little ringing will never be noticed. WebP where you control the page and know the visitor's browser, because it is usually a fraction of the PNG at the same apparent quality. The weight beside the download control is measured from a small copy of this exact design and scaled, not guessed from the layer list.

Can I put one of these behind a person?

Not on this page, and nothing here will pretend otherwise. Placing a background behind somebody means separating them from whatever is already behind them, and that separation is a different operation with a different set of failure modes. This page only ever draws; it has no way to open a photograph and no code that looks at one. What it can do is produce the background itself, at the exact pixel size the other job needs.

Five routes open this generator in a different starting state, because the first thing on screen should match what you came for. Each one is the same instrument with a different preset and a different size already selected; nothing is locked off, so a size route will still take a typed pair of numbers and the flat-colour route will still take a gradient on top.

• GradientStops, an angle, and a choice about the space the ramp runs through.
• Solid colourOne colour at a stated pixel size. The smallest file here.
• 1920 × 1080The desktop screen figure, on the canvas when the page opens.
• 1080 × 1920The upright phone figure, for a lock screen or a full-bleed story.
• LibraryForty starting points, each one a stack that stays editable.

Three written pages carry the reasoning the controls only assert. One works through the dimensions — screens, cards, banners, paper at 300 dots per inch — and the conversion from millimetres. One takes the banding apart: 256 levels, a ramp longer than that, and what the dither switch trades to hide the steps. The last weighs the same design as a PNG, a JPG and a WebP and says which number goes up when the grain goes on.

They are the long form of four of the answers above, and they are the only pages here that are meant to be read rather than used.

• The written pagesThree longer arguments, each one a number the control panel has no room to explain.
• Pixel sizes that actually matterThe dimensions worth knowing, and how to get one from a physical size.
• Why gradients bandEight bits, a long ramp, and the grain that trades one artefact for another.
• Which format for a backgroundWhat each format does to a ramp, with the weights measured rather than asserted.

Nothing here is sent anywhere. The file is drawn by your browser and written to your disk.