How is a mesh gradient built here?

As five radial gradients layered on one background, each fading from a solid colour to transparent. Where they overlap, the colours blend into each other.

Can I control the colours or positions?

No. Both are drawn at random and the only control is the Regenerate button. There are no sliders for blob count, spread or colour.

Why does the background look transparent in places?

Because each blob fades to transparent and nothing sits behind the stack. Place the mesh over a solid colour if the result should be opaque.

Can I reproduce a mesh I liked?

Not after regenerating — there is no seed and no history. Copy the CSS value to keep it.

Can the mesh be layered over a photograph?

Yes — and there the transparency works in its favour: the five blobs go on as a background layer over the image, and the photograph shows through the gaps, which is exactly what the floating-colour look is after.

Mesh Gradient Generator

CSS

background: ;

You Might Also Need

CSS Gradient Animation Generator

Generate animated CSS gradients

Radial Gradient Generator

Build radial gradients with shape & position

Text Gradient Generator

Create CSS gradient text

Conic Gradient Generator

Build conic gradients with center & angle

The mesh gradient generator builds a mesh gradient CSS background from five randomly placed colour blobs and gives you the layered value to copy.

What is Mesh Gradient Generator?

The mesh gradient generator works with one button. Press Regenerate mesh and five coloured blobs are placed at random positions across a panel, producing a soft, clouded background rather than a directional ramp. Below the preview, the CSS card holds the whole background value with a copy button.

The construction is what separates a mesh gradient from an ordinary one, and it is visible in the emitted CSS. It is, in effect, a multi blob gradient: several soft shapes on one surface rather than a single sweep from one side to the other. Rather than a single gradient, the value is a comma-separated stack of five radial gradients, each centred at its own percentage coordinates and each fading from a solid colour to transparent by the halfway point of its radius. Layered on one background, those five circles overlap and blend, and because each fades out rather than ending abruptly, there are no visible edges — just regions where one colour is dominant and transitional areas where two or three mix.

That layering is also why the output looks the way it does when a blob has no neighbour nearby. A radial gradient fading to transparent leaves whatever is behind it showing through, and behind the whole stack there is nothing, so a blob near the edge of the panel reads as a colour floating on the page's own background. That is a feature for layering over an image and a surprise when you expected an opaque tile: if the result should be self-contained, place the mesh over a solid background colour rather than on its own.

Both the colours and the positions are drawn at random, so one regeneration produces a harmonious aurora and the next is closer to a palette accident.
Positions can also cluster by chance, leaving one region crowded and another bare.
There are no sliders for colour, position or blob count — the button is the only control, and the honest workflow is to press it until the result is worth keeping.

In use, this is a decorative background generator, and the sensible places for it follow from that — hero sections, page headers, empty states, card headers, presentation slides. It is a poor choice behind body text, both because a mesh gradient is busy and because the overlapping translucent layers make the effective background colour underneath any given word unpredictable, which is exactly what makes contrast hard to guarantee. If text has to sit on it, place the text in a panel with its own solid backing, or reduce the effect's prominence with an overlay.

Practical limits: five blobs at fixed saturation, no control over any of them, no seed, and no export beyond the CSS — so a mesh you liked cannot be reproduced once you regenerate.
Compared with the linear and conic gradients in this domain, it trades precision for variety, which is the right trade when the only requirement is that a background looks alive on the day.
Used as a random mesh background, it produces a plausible mesh gradient css value in one click, and the layered-blob recipe inside the declaration is exactly the aurora gradient css look that marketing pages chase.

How to use Mesh Gradient Generator

Press Regenerate mesh until the arrangement looks right.
Copy the background value from the CSS panel.
Place it over a solid background colour if the result needs to be opaque.
Keep text off the busy areas, or give it its own backing panel.

When to use Mesh Gradient Generator vs related tools

Use this when a page needs a soft, multi-coloured decorative background — hero sections, headers, empty states. Use a linear or conic gradient generator when the direction and stops need to be controlled precisely. Where one blob needs its centre and its reach controlled rather than randomised, the radial gradient generator is the deliberate version; where the mesh has to carry text, the opacity layering calculator flattens the translucent stack into the single effective colour contrast should be measured against.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.