CSS Mesh Gradients Without Images: Layered radial-gradient Explained

You open a beautiful landing page. The background melts from pink into lilac into mint, like someone breathed colour onto glass. You check the network tab, expecting a big background image. There isn't one.

That soft, blotchy background is called a mesh gradient. Designers make them in Figma or Illustrator. On the web, you can make one with nothing but CSS, and it takes about ten lines.

The simple idea: spotlights on a stage

Picture a theatre stage with the lights off. Now switch on four coloured spotlights: pink top-left, blue top-right, mint bottom-left, yellow bottom-right. Each light is bright in the middle and fades out towards its edges. Where two beams overlap, their colours mix.

That's the whole trick. Each spotlight is one radial-gradient. The stage floor is your background-color. And the way overlapping light mixes is your background-blend-mode.

The real thing: three CSS properties

radial-gradient() paints colour that spreads out from a point. The one line we care about looks like this:

radial-gradient(circle at 12% 18%, #ffc7e8 0%, transparent 55%)

Read it left to right: a circle, centred 12% from the left and 18% from the top, starting fully pink and fading to transparent by 55% of the way out. The fade to transparent is the key. It's what turns a hard disc into a soft blob.

background-image accepts a comma-separated list. The first item sits on top, the last at the bottom. So you can stack as many blobs as you like.

background-blend-mode decides how each layer mixes with what's beneath it. You can give one mode for all layers, or a comma-separated list, one per layer.

See it work

Here's a complete four-blob mesh. Notice there's no image anywhere:

.mesh {
  background-color: #fbf8ff;
  background-image:
    radial-gradient(circle at 12% 18%, #ffc7e8 0%, transparent 55%),
    radial-gradient(circle at 85% 15%, #c9dcff 0%, transparent 50%),
    radial-gradient(circle at 20% 90%, #c8f2dc 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, #fff1b8 0%, transparent 50%);
  background-blend-mode: multiply;
}

And here's a close relative from Gradient Studio, Pastel Mesh, running live (it uses ellipses and slightly different colours):

.bg-pastel-mesh {
  background-color: #FDF7FF;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(255, 199, 229, 1) 0%, rgba(255, 199, 229, 0) 45%),
    radial-gradient(ellipse at 85% 15%, rgba(199, 224, 255, 1) 0%, rgba(199, 224, 255, 0) 45%),
    radial-gradient(ellipse at 18% 85%, rgba(201, 245, 225, 1) 0%, rgba(201, 245, 225, 0) 45%),
    radial-gradient(ellipse at 88% 88%, rgba(255, 240, 184, 1) 0%, rgba(255, 240, 184, 0) 45%);
  background-blend-mode: multiply, multiply, multiply, multiply;
  background-size: cover;
}

Four layers, one base colour, one blend mode. The browser draws it, so it scales to any screen size without going blurry.

Choosing a blend mode

You don't need to learn all sixteen blend modes. Two of them do most of the work.

• multiply for light backgrounds. It works like overlapping coloured glass: where two blobs meet, the colour gets deeper, never brighter. That's why pastel meshes look rich instead of washed out.
• screen for dark backgrounds. It's the opposite, like two torches pointed at the same wall: overlaps get brighter. Put a few saturated blobs on near-black and you get a nebula.

Here's the same idea flipped to a dark base with screen:

.bg-violet-mesh {
  background-color: #0A0612;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(139, 92, 246, 1) 0%, rgba(139, 92, 246, 0) 48%),
    radial-gradient(ellipse at 84% 25%, rgba(217, 70, 239, 1) 0%, rgba(217, 70, 239, 0) 44%),
    radial-gradient(ellipse at 22% 86%, rgba(99, 102, 241, 1) 0%, rgba(99, 102, 241, 0) 48%),
    radial-gradient(ellipse at 88% 85%, rgba(244, 114, 182, 1) 0%, rgba(244, 114, 182, 0) 40%);
  background-blend-mode: screen, screen, screen, screen;
  background-size: cover;
}

What goes wrong

Blobs with hard edges. You forgot the transparent stop, or gave it too small a percentage. Push it to 50–60% and the edges dissolve.

Everything turns grey. Blending complementary colours (orange over blue, say) with multiply gives you brownish grey. Keep neighbouring blobs close on the colour wheel, and save contrast for opposite corners.

Text is hard to read. A mesh is busy by nature. Keep the area behind your headline calm: place the strongest colours in the corners, away from the text, and check contrast where the text actually sits.

Animating it on every frame. Moving four big gradient layers 60 times a second can make a cheap phone stutter. If you want motion, fade between two finished gradients with opacity, which browsers handle far more cheaply.

When to use it, and when not to

Use a mesh gradient for hero sections, cards that need a little personality, and placeholder thumbnails. It weighs nothing, it never needs an image request, and you can change the colours later in one line.

Skip it behind long paragraphs of text, and skip it when your brand calls for a flat, quiet look. A mesh is a spice, not the main dish.

Build your own without writing the CSS

Writing these by hand is fine for one gradient. Tuning blob positions by trial and error gets old fast, though. That's why I built Gradient Studio: pick from two dozen presets, drag the layers around, then copy the CSS or a Tailwind class, or download a PNG.

In one line: a mesh gradient is just a few soft radial-gradient spotlights stacked on a base colour, mixed with multiply on light backgrounds or screen on dark ones.