Mesh gradients from layered radials
Several soft radial gradients over a base colour: reproducible from a seed, exported as plain CSS with no image and no JavaScript.
Mesh gradients from layered radials
Several soft radial gradients over a base colour. Reproducible from a seed, and exported as plain CSS with no image and no JavaScript.
When to bake it into an image
Kept as layered CSS radials, a mesh gradient stays resolution-independent, weighs almost nothing, and can be adjusted by editing numbers. That is the right form for a page background, and it is why the tool emits CSS rather than a picture.
Several destinations cannot use it. Email clients strip or mangle most modern CSS, so an HTML email needs a rasterised version. Open Graph and social preview images are fetched as files, so a share card has to be a real image. Anything going into a design tool, a slide deck or a print workflow is the same story. In all of those, export a PNG at the size it will actually be used and accept that adjusting it later means coming back here rather than editing a number.
Rasterising has one trap worth knowing
A very large, very smooth gradient is precisely the image that compresses badly and bands visibly. Smooth tonal transitions are what JPEG handles worst at low quality, producing blotches in exactly the soft areas the gradient is made of; and in eight-bit colour a gentle sweep across two thousand pixels has to repeat each intermediate value many times, which the eye reads as stripes.
PNG avoids the compression artefacts and gets large, because it is lossless and there is little to compress. The usual answer is to export as PNG, accept the size for a hero or a share card, and add a faint layer of noise before exporting if banding shows — the grain breaks up the boundaries between steps and costs almost nothing visually.
What this actually is
A real mesh gradient interpolates a grid of control points and needs a shader or a rasteriser. This is the CSS approximation: several large, soft radial-gradients at different positions, layered over a base colour.
It is honest about being an approximation because the difference matters — you cannot animate the control points, and the falloff is a fixed radial curve rather than a surface.
What it gives you in exchange is a background that is pure CSS: no image to load, no canvas, no layout shift, and it scales to any size.
Positions and sizes come from the seed, so the same seed rebuilds the same mesh exactly.
Keep text off it, or check it properly
A mesh background varies across its whole area, so text over it has a different contrast in every region. Either keep the text on a solid panel, or measure against the lightest and darkest points rather than an average.
Large soft gradients are cheap
Unlike a blurred element, a radial gradient is painted once and does not need a backdrop pass. A handful of them as a page background costs very little.