What is a mesh gradient in CSS?

A mesh gradient is the smooth blending of several colour points across a surface. In CSS it is approximated by stacking multiple radial gradients — one per colour point — over a solid base colour, which is exactly what this tool generates.

Does the output use any images?

No. The result is 100 percent CSS: a background-color plus a background-image made of layered radial-gradient() functions. There are no image files, so it scales crisply to any size and adds no extra network requests.

How many colour points should I use?

Three to four points usually give a rich, balanced blend. More than that can look busy. The tool caps the count at six to keep the CSS manageable and the render fast.

Will this work in all browsers?

Layered radial gradients are supported in every modern browser. The output uses only standard CSS gradient syntax, so no vendor prefixes are required for current browsers.

What is the CSS Mesh Gradient Generator?

Free CSS mesh gradient generator. Place 3 to 6 colour points, drag their positions, randomize palettes, and copy a pure-CSS background made of layered radial gradients — no images required. Live preview runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Mesh Gradient Generator

Name: CSS Mesh Gradient Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Mesh gradients — those soft, multi-colour “aurora” backgrounds — can be built entirely in pure CSS by layering several radial gradients over a base colour. This generator lets you place and move colour points, then copies the exact CSS with no image files involved.

How it works

Each colour point becomes one radial gradient that fades to transparent, and they are stacked in a single background-image:

background-color: #1b212d;
background-image:
    radial-gradient(at 12% 18%, #ff6b9d 0px, transparent 55%),
    radial-gradient(at 82% 22%, #6d8bff 0px, transparent 55%),
    radial-gradient(at 28% 82%, #a274ff 0px, transparent 55%);

The base colour shows through the transparent gaps, so choosing a dark or light base changes the whole mood of the mesh.

Tips

Spread the points toward the corners for a full-bleed blend; cluster them for a soft spotlight.
Use a randomize pass to explore palettes quickly, then fine-tune the two or three points you like.
Because it is pure CSS, the gradient stays crisp at any resolution and adds zero extra HTTP requests — ideal for hero sections and cards.

The live preview and all generation run in your browser.