CSS Mesh Gradient Generator

How the Mesh Gradient Generator works

CSS mesh gradient generator: layered radial gradients

Design tools like Figma have a true mesh gradient: a grid of control points, each with a colour, and the renderer interpolates between them across a warped surface. CSS has no such primitive. What it does have is the ability to stack as many background images as you like, and radial-gradient() accepts a position. Put a radial gradient at 20% 30% that fades from pink to transparent, another at 80% 70% that fades from blue to transparent, and lay them over a solid base, and the eye reads the result as a mesh. That is exactly what this generator writes.

Why the layers fade to transparent. Each radial gradient is a circle of colour that dissolves into nothing. Where two circles overlap, the browser composites them, so the colours mix naturally rather than one hard-edging over the other. The spread value controls where each circle reaches full transparency: a low spread gives tight, distinct pools of colour; a high spread lets every colour bleed across most of the box, which is softer and closer to the aurora look.

The base colour matters more than it seems. Any part of the box that no radial layer covers shows the base colour through, and the transparent edges of every layer blend towards it. A dark base makes the colour points glow; a base that matches one of the points makes that colour dominant; a white base gives the washed, pastel version popular on landing pages. Change it first when the result feels wrong.

The seed. Positions are chosen by a small seeded random number generator, so a given seed always produces the same layout. Drag through the seeds until the composition suits you and the number in the CSS is stable — reload the page with the same values and you get the same gradient. The positions are written as plain percentages in the output, so you can nudge any of them by hand afterwards.

Performance. Four stacked gradients over a large hero are cheap to paint but not free to repaint. Avoid animating the gradient positions directly; if you want movement, animate a transform or the opacity of an overlay instead, both of which stay on the compositor. A filter: blur() over the whole box smooths the joins between layers at the cost of a heavier paint, so keep it modest and test on a phone.

Text on top. Mesh gradients change brightness across their surface, so a colour that passes contrast in one corner may fail in another. Either put text on a solid or semi-transparent panel over the gradient, or keep the palette within a narrow luminance band so the whole surface reads as roughly one tone. The contrast checker on this site tests a single pair of colours; test against the lightest and the darkest point of the mesh.

When to reach for something else. For a genuinely photographic mesh with dozens of points and smooth internal warping, export a PNG or a WebP from a design tool and use it as a background image — the CSS version tops out at a handful of points before it starts to look like a pile of spotlights. For two colours, a plain linear or radial gradient is simpler and easier to tune.

Related tools