How to Make a Mesh Gradient in CSS (No WebGL Required)

Mesh gradients are everywhere right now — those soft, organic blends of three or four colors that sit behind hero sections, app backgrounds, and login screens. Most tools render them with WebGL and hand you a flat PNG or an MP4. That looks great, but it means the gradient is a baked image you can’t restyle, and the fancy exports are usually behind a paywall.

There’s a simpler path that ships as a few lines of CSS, works in every modern browser, and costs nothing: layered radial gradients.

The core idea

A mesh gradient is really just several soft color “blobs” placed at different spots and blended over a base color. CSS can express each blob as a radial-gradient, and you can stack as many as you like in a single background-image:

background-color: #0B1020;
background-image:
  radial-gradient(circle at 20% 25%, #7C3AEDFF 0%, #7C3AED00 55%),
  radial-gradient(circle at 78% 22%, #EC4899FF 0%, #EC489900 55%),
  radial-gradient(circle at 30% 80%, #22D3EEFF 0%, #22D3EE00 55%),
  radial-gradient(circle at 80% 78%, #34D399FF 0%, #34D39900 55%);

Each layer is one color pooled at a point, fading out. The base color shows through wherever the blobs don’t reach.

The one trick that makes it look good

Notice each blob fades from #7C3AEDFF (solid) to #7C3AED00 (the same color at zero alpha) — not to transparent.

That matters. The CSS transparent keyword is transparent black, so fading to it drags every blob through a dim gray ring before it disappears. Fading to the same color at alpha 0 keeps the hue constant the whole way out, so the blobs melt into the base cleanly with no muddy halos.

Why pick the colors in OKLCH

If you generate the blob colors at random in HSL or RGB, some come out glaring and others muddy, because those spaces aren’t perceptually uniform. Pick them in OKLCH at a consistent lightness instead and the palette stays balanced — every color reads as equally vivid, which is exactly what you want for a cohesive wash.

That’s how our mesh gradient generator builds its colors: harmonized in OKLCH, randomized with the spacebar, and exportable either as a free hi-res PNG or as the exact CSS above.

When to reach for WebGL instead

Plain CSS gives you a static mesh. If you specifically need the gradient to slowly drift and animate, that’s where a WebGL/shader implementation earns its weight. For the overwhelming majority of hero backgrounds, though, a static CSS mesh is lighter, more portable, and far easier to drop into a design system — no canvas, no runtime, no dependency.

Try it

• Open the Mesh Gradient Generator, press space until you like it, drag the points, and copy the CSS.
• Want a classic two-stop gradient instead? The Gradient Generator does linear, radial, and conic with OKLCH interpolation.
• Browse ready-made options in the gradient gallery.