Mesh Gradient Generator
Layered radial gradients built from one base hue, so the colours stay related instead of muddy. Add noise to hide banding, shuffle until you like it, and copy pure CSS — no image, no library.
Your hero section
Text sits on top — check it stays readable wherever the light areas land.
Every blob stays within 40° of this hue.
More blobs means more colour but muddier transitions.
Noise hides the banding that large gradients show on cheap screens.
The layout comes from a seed, so the URL always reproduces this exact gradient.
Output
.mesh {
background-color: #0D0F8C;
background-image:
radial-gradient(at 33% 14%, #928FE9 0px, transparent 77%),
radial-gradient(at 83% 34%, #7248ED 0px, transparent 53%),
radial-gradient(at 60% 56%, #4B5ED9 0px, transparent 63%),
radial-gradient(at 34% 71%, #C891E7 0px, transparent 50%);
}
/* Noise sits in its own layer: texture without softening the gradient. */
.mesh::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mesh {
position: relative;
isolation: isolate;
}Frequently asked
Why are the colours generated from one hue instead of at random?
Because unrelated hues blend into grey where they overlap. Keeping every blob within about 40° of the base hue is what makes a mesh gradient look deliberate rather than accidental — the colours stay related while the lightness and saturation vary.
What is the grain for?
Large smooth gradients show visible banding on 8-bit displays — stripes where the colour steps. A light noise layer breaks up those steps and the eye reads it as smooth. It also gives the surface a bit of texture, which is why it shows up in so many marketing pages.
Is the noise an image file?
No. It is an SVG feTurbulence filter embedded as a data URI, so there is nothing extra to download and it stays sharp at any size. It sits in its own layer so it textures the surface without softening the gradient underneath.
Why does the URL contain a seed?
So the gradient is reproducible. Shuffling picks a new seed rather than random values, which means the address bar always describes exactly what you are looking at and sharing the link shares the same result.
Will text stay readable on top?
Not automatically. Mesh gradients have bright and dark regions, so a colour that passes contrast in one corner can fail in another. Either keep text over a consistently dark area, add a subtle overlay behind it, or check the worst spot with the contrast matrix.