Mesh gradient generator

Most background images carry structure — an edge, a repeat, a focal point — and structure has to be managed. It has to line up with your layout, survive being cropped at every viewport width, and avoid colliding with the text on top. A mesh gradient has none, and that absence is the feature. There is no wrong place to cut it, no orientation that breaks it, and no composition for a responsive layout to ruin.

That makes it unusually forgiving in exactly the places a background is hardest to get right. An app screen that has to work at every window size, a hero that spans an ultrawide monitor and a phone, a slide template filled by someone who was not there when it was designed: a mesh survives all three without supervision. It also sidesteps the worst failure mode of photographic backgrounds, which is that the interesting part ends up behind the content.

The trade is contrast. Because the field is uneven, the contrast between your text and the background varies across the frame — comfortably readable over a pale region and marginal over a saturated one, with the boundary somewhere in the middle of your paragraph. The way to think about it is to test against the extreme rather than the average: find the darkest point the text crosses and check there. Single-hue palettes narrow that range considerably, which is why they are the better choice when real content sits on top.

Format is the other decision, and vector wins by a wide margin here. The blend in an SVG is described rather than stored, so the file is a handful of gradient definitions regardless of how large it is drawn, and the renderer computes it at the display resolution — no softness when scaled up, no banding in the flat regions. A PNG of the same gradient has to commit to a size and to 8-bit colour, which is precisely the combination that produces visible steps across a large smooth area.

One caution about technique, since mesh gradients are often built with heavy blur filters: this one is not. The field here is made from overlapping radial gradients that fade to transparent, which produces the same look without asking the browser to rasterise and blur a full-screen layer on every paint. That matters most on phones, and it matters most of all when the background is the largest element on the page — the thing a performance score measures.