What is a mesh gradient, technically, in CSS?

It's several radial-gradient() layers — each one a soft circle of color fading to transparent, positioned at a different point — stacked together as a comma-separated background-image list, so their overlapping fades blend into smooth, organic color transitions rather than the single straight-line blend of a linear-gradient.

How many blobs should I use for a natural-looking mesh?

Four to five blobs, spaced so they overlap moderately, gives the richest blend without muddying into gray in the overlap zones; two or three works fine for a subtler, more minimal look.

Why do some blob combinations look muddy in the middle?

Where three or more semi-transparent color layers overlap, their colors mix additively and can drift toward brown or gray, especially with very different hues — keeping blob colors within a related palette (like the presets do) or spacing blobs further apart avoids that muddiness.

Does this require any images, SVG, or WebGL?

No — it's pure CSS background-image gradients, so it's lightweight, scales to any element size without a fixed-resolution image, and works anywhere gradients are supported.

Can I animate the blobs too?

This generator outputs a static mesh; for a slowly drifting version, CSS only supports animating a single combined background-position for a multi-layer background-image list without extra wrapper elements — the Aurora Background generator on this site handles that kind of independently-moving-blob animation instead, using separate absolutely-positioned elements rather than one combined gradient.

CSS MESH GRADIENT GENERATOR

Blend color blobs into a soft mesh gradient background and copy the CSS.

Drag a handle to reposition its blob

Base background

Color blobs

Blob 1

Color

X: 20%

Y: 30%

Spread: 55%

Blob 2

Color

X: 75%

Y: 20%

Spread: 50%

Blob 3

Color

X: 50%

Y: 80%

Spread: 60%

Presets

HTML

<div class="mesh-gradient">Your content here</div>

CSS

.mesh-gradient {
  background-color: #f5ede4;
  background-image: radial-gradient(circle at 20% 30%, #ffd1dc, transparent 55%),
    radial-gradient(circle at 75% 20%, #d9c6f0, transparent 50%),
    radial-gradient(circle at 50% 80%, #c8f0dc, transparent 60%);
}

How to build a CSS mesh gradient

1
Pick a preset mesh or start from scratch.
2
Add or remove color blobs — each one is a separate radial gradient layer.
3
Drag each blob's position and adjust its size/spread.
4
Set the base background color that shows between blobs.
5
Copy the generated CSS background-image list.

Questions

What is a mesh gradient, technically, in CSS?: It's several radial-gradient() layers — each one a soft circle of color fading to transparent, positioned at a different point — stacked together as a comma-separated background-image list, so their overlapping fades blend into smooth, organic color transitions rather than the single straight-line blend of a linear-gradient.
How many blobs should I use for a natural-looking mesh?: Four to five blobs, spaced so they overlap moderately, gives the richest blend without muddying into gray in the overlap zones; two or three works fine for a subtler, more minimal look.
Why do some blob combinations look muddy in the middle?: Where three or more semi-transparent color layers overlap, their colors mix additively and can drift toward brown or gray, especially with very different hues — keeping blob colors within a related palette (like the presets do) or spacing blobs further apart avoids that muddiness.
Does this require any images, SVG, or WebGL?: No — it's pure CSS background-image gradients, so it's lightweight, scales to any element size without a fixed-resolution image, and works anywhere gradients are supported.
Can I animate the blobs too?: This generator outputs a static mesh; for a slowly drifting version, CSS only supports animating a single combined background-position for a multi-layer background-image list without extra wrapper elements — the Aurora Background generator on this site handles that kind of independently-moving-blob animation instead, using separate absolutely-positioned elements rather than one combined gradient.