CSS Mesh Gradient — How to Create the Effect Free with Pure CSS

Mesh gradients — the soft, multi-colour blended backgrounds made famous by Apple and Stripe — are everywhere in 2025-2026 design. Most mesh gradient tools export PNG or SVG images. But you can approximate the effect in pure CSS using layered radial gradients, which keeps your backgrounds scalable, responsive, and lightning fast. Here is how.

What a Mesh Gradient Actually Is (Technically)

A true mesh gradient is a mathematical surface where colour values are interpolated at each point in a 2D grid — the kind of thing Figma, Illustrator, and Photoshop generate natively. The result is a smooth, multi-directional colour blend that feels almost organic.

CSS does not have native mesh gradient support (as of 2026). What you can do is layer multiple radial gradients — each one a soft colour blob at a different position — to create a visually similar effect. The result is not a mathematically precise mesh, but it looks close enough that most viewers cannot tell the difference.

The Layered Radial Gradient Technique

CSS supports multiple background layers. Stack several radial gradients, each with partial transparency, and they blend together like paint on glass:

background-color: #f0f0f0;
background-image:
radial-gradient(ellipse at 20% 30%, rgba(120, 80, 255, 0.5) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(255, 100, 150, 0.5) 0%, transparent 55%),
radial-gradient(ellipse at 60% 80%, rgba(60, 180, 255, 0.5) 0%, transparent 65%),
radial-gradient(ellipse at 30% 70%, rgba(255, 200, 60, 0.4) 0%, transparent 50%);

Each radial gradient defines: a position (at X% Y%), a colour with alpha, and a fade-to-transparent radius. The result is four colour blobs overlapping on a base background colour.

Sell Custom Apparel — We Handle Printing & Free Shipping

Using the Free CSS Gradient Generator to Build the Components

The CSS gradient generator produces individual gradient strings. For a mesh effect:

1. Generate each colour blob as a separate radial gradient — pick your colour, set ellipse type, preview the fade
2. Note the CSS output for each one
3. Combine them into a single background-image declaration by comma-separating the layers
4. Add a solid background-color as the base layer beneath them all

The generator handles the tricky part — getting the radial gradient syntax right and previewing how the colour fades. You do the composition work by stacking the outputs.

Ready-to-Use Mesh Gradient CSS Template

Copy this and customise the colours and positions for your brand:

.mesh-bg {
background-color: #fafafa;
background-image:
radial-gradient(ellipse at 15% 25%, rgba(139,92,246,0.45) 0%, transparent 55%),
radial-gradient(ellipse at 85% 15%, rgba(236,72,153,0.4) 0%, transparent 50%),
radial-gradient(ellipse at 70% 85%, rgba(59,130,246,0.45) 0%, transparent 60%),
radial-gradient(ellipse at 25% 75%, rgba(16,185,129,0.35) 0%, transparent 50%);
}

Adjust the at X% Y% values to move each blob, tweak rgba opacity to intensify or soften the blend, and change the colour values to match your palette.

Frequently Asked Questions

Is there a true CSS mesh gradient property?

No. Native CSS mesh gradients do not exist as of 2026. The layered radial gradient technique is the closest pure-CSS approximation available.

Should I use a PNG mesh gradient image instead of CSS?

PNG is faster to implement but has fixed dimensions and scales poorly on retina displays. The CSS approach is resolution-independent, always crisp, and typically a smaller file size than a high-quality PNG.

How many radial gradient layers can I stack?

Technically unlimited, but 3-5 layers is the practical sweet spot. More layers increase complexity without meaningfully improving the visual result, and each layer adds a small rendering cost.