How does a mesh gradient work in pure CSS?

A mesh gradient is several radial-gradient layers stacked in one background property, each positioned at a different point with its own color that fades to transparent. A solid background-color sits underneath. Where the soft circles overlap they blend, producing the smooth multi-point look without any image file.

Do I need an image or a library?

No. The output is plain CSS using radial-gradient and a background-color, so it works in any modern browser with no image asset and no JavaScript library. You paste two lines into a rule and the effect renders natively.

Why are the gradients faded to transparent?

Each radial point goes from a solid color at its center to fully transparent at its edge using an rgba stop. That lets the layers underneath show through and blend, which is what creates the soft mesh rather than hard-edged circles.

Can I control the colors?

Yes. Set a base hue and a spread, and each point is given a hue within that range at high saturation. A narrow spread yields a tonal, monochrome mesh; a wide spread yields a colorful, aurora-like one.

Is anything sent to a server?

No. The CSS is generated locally in your browser with no network calls, so you can design offline and nothing you create is uploaded anywhere.

Gradient Mesh Generator

Soft, layered backgrounds in two lines of CSS

Mesh gradients — those soft, multi-colored backgrounds that look like blended light — are everywhere in modern product and landing-page design. The Gradient Mesh Generator builds one as pure CSS: a stack of positioned radial-gradient layers over a solid base, ready to paste into any element’s background.

How it works

The effect is a single background property holding several radial-gradient(...) layers separated by commas, sitting on top of a background-color. Each layer is one blob: a position expressed in percentages, and a color that starts solid at the center and fades to fully transparent at its edge via an rgba(...) color stop. Because the layers are partly transparent, wherever two blobs overlap their colors blend, which is what produces the smooth mesh instead of distinct circles.

Colors are chosen in HSL. You set a base hue and a spread; each point gets a hue drawn from that window at high saturation and medium lightness, then converted to rgba. Positions are scattered across the element. A narrow spread keeps the mesh tonal; a wide spread makes it vivid and aurora-like.

Tips and example

A typical result looks like this, applied to a full-height hero:

background-color: #2b1055;
background:
  radial-gradient(at 18% 22%, rgba(124,58,237,0.8) 0px, transparent 50%),
  radial-gradient(at 82% 14%, rgba(236,72,153,0.7) 0px, transparent 55%),
  radial-gradient(at 40% 78%, rgba(59,130,246,0.7) 0px, transparent 50%);

Apply it to a large element such as a hero or section — meshes read best at scale, not on small buttons.
Use a darker base color for a glowing, neon feel and a lighter base for a soft, pastel one.
Keep four to six points; too many muddy the blend, too few look like plain gradients.