CSS MESH GRADIENT GENERATOR

Example output (default settings)

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

.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. 1

   Pick a preset mesh or start from scratch.

2. 2

   Add or remove color blobs — each one is a separate radial gradient layer.

3. 3

   Drag each blob's position and adjust its size/spread.

4. 4

   Set the base background color that shows between blobs.

5. 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.

Related tools

• Animated Gradient Background GeneratorBuild a slow-moving, multi-color gradient background for hero sections and banners.
• Aurora Background GeneratorCreate a drifting northern-lights background from blurred, animated color blobs blended with mix-blend-mode.
• Shimmer / Metallic Text GeneratorSweep a bright highlight band across text for a metallic or shimmer effect, built with an animated gradient.
• CSS Starfield / Dots GeneratorScatter hundreds of points from a single box-shadow into a drifting, parallax starfield background and copy the CSS.
• Animated Gradient Text GeneratorFill text with a multi-color CSS gradient that drifts across the letters, with adjustable angle and speed.
• CSS Gradient Border GeneratorBuild a rounded gradient border with 2-5 color stops using the padding-box/border-box trick, and copy the CSS.
• CSS Text Gradient GeneratorFill headline text with a multi-color CSS gradient using background-clip: text, then copy the CSS.
• CSS Noise Background GeneratorBuild a film-grain noise texture from a pure-SVG filter — no image file — and copy the CSS.