Mesh Gradient Generator

A mesh gradient is stacked radial gradients

Design tools that offer a real mesh gradient are interpolating a grid of control points across a surface. CSS has nothing like that. What it does have is layered radial-gradient values, each fading to transparent, painted over a solid base color — and stacked four or five deep, the result is close enough that most people cannot tell.

.mesh {
  background-color: #a1c0b1;
  background-image:
    radial-gradient(at 20% 25%, #ff6b6b 0px, transparent 55%),
    radial-gradient(at 78% 20%, #4ecdc4 0px, transparent 50%),
    radial-gradient(at 30% 80%, #45b7d1 0px, transparent 55%);
}

The base color matters more than it looks. It is what shows through wherever the layers have faded out, so it sets the overall temperature of the whole surface — this tool derives it from the average of your points rather than leaving it white.

Blur, point size and grain

The three sliders do different jobs. Point size changes how far each color reaches before fading; larger points overlap more and produce fewer distinct regions. Blur softens the falloff so the boundaries between colors stop being readable as edges. Grain adds noise on top.

Grain is worth more than it sounds. Large, soft gradients are exactly where 8-bit color runs out of steps and produces visible banding on gradients that looked fine in the editor. A few percent of noise breaks up those steps — the texture is invisible at normal viewing distance, but the banding goes with it.

CSS or an exported image

Use the CSS when the surface has to be responsive. Because the points are positioned in percentages, the mesh reflows with the element instead of stretching, which is what you want behind a hero that has to work on a phone and a 27-inch display.

Export the PNG when the mesh is leaving the browser — social cards, slide backgrounds, app store screenshots — or when you need grain, since the noise is baked into the image rather than reproduced by CSS. The SVG export is the right pick for print and for handing to a designer who will keep working on it.

Frequently asked questions

How many color points should I use?

Four or five is the sweet spot. Three tends to read as an ordinary gradient; past six the colors average out into a single wash and the extra points stop being visible. Spread them unevenly — a symmetrical arrangement looks generated.

Can I put text on top of a mesh gradient?

Only carefully. A mesh has no single background color, so contrast varies across the surface and a headline that is legible at one corner can fail at another. Either keep the points within a narrow lightness range, or place a semi-transparent scrim behind the text.

Is this expensive to render?

Layered radial gradients are painted once and cached, so a static mesh costs essentially nothing after first paint. It only becomes expensive if you animate it or apply a large CSS filter: blur() over the top — the blur here is built into the gradient falloff instead, which avoids that.

Why does my exported PNG look different from the preview?

The export renders at a fixed size while the preview fills whatever space it has. Since the points are placed proportionally, a different aspect ratio moves them relative to one another. Match the export dimensions to where it will be used and the two agree.

Other gradient tools

• Gradient Generator — straightforward linear and radial gradients
• Animated Gradient Generator — backgrounds that drift
• Glassmorphism Builder — frosted panels to sit on top of a mesh