Forty starting points

Every tile here is a layer stack, not a picture. Open one and the generator has the whole thing loaded — the stops, the angles, the seeds, the blend modes — at whatever output size you then choose.

The grid itself is drawn by your browser from the same OKLCH values the renderer uses, which is why a page carrying forty backgrounds loads like a page carrying none. It also means the tiles are an approximation: a browser interpolates a gradient its own way, applies no dither and has no form for grain at all. The four labelled as grain look flat here and do not in the file.

Ramps

Two or three stops along a straight line. These are the ones that band on a long edge, and every one of them ships with the dither pass switched on.

Fields

A centre and a falloff. The light comes from a point rather than an edge, which suits a page whose content sits in the middle of the screen.

Flats

One colour, no ramp. The smallest file this site can produce and the one that behaves best behind small text.

Grain

A colour with a noise layer over it. Grain costs file size in every format and buys a surface that does not look like a screenshot of a colour picker.

Questions about the library

Are these images or settings?

Settings. A preset is the same object the generator edits — a ground colour and a list of layers — so opening one puts every stop, angle, seed and blend mode in your hands rather than handing you a finished picture. Nothing here is stored as a file, which is also why the page carries forty backgrounds and weighs about as much as a page of text.

Why do the tiles look flatter than the download?

Because the tiles are drawn by your browser from the same numbers, using a CSS gradient, and a browser applies no dither and cannot draw the grain layers at all. What you see in a tile is the ramp; what you get in a file is the ramp with about one level of noise worked through it, and with the noise layer where a preset has one.

Can I get back to a design I made earlier?

If you kept the link, yes. The whole stack is written into the address of the generator page as you work, so a bookmarked or pasted link reproduces the design exactly rather than approximately. Nothing is stored here between visits — there is no account, no history and no server to keep one on.

Back to the canvas

Pictures you open and backgrounds you draw never leave this page. They are cut out and drawn by your browser, and the file is written straight to your disk.

Backgrounds made here: Terracotta · Studio grey · Slate ramp