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
Nothing here is sent anywhere. The file is drawn by your browser and written to your disk.