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.

What is the Gradient Mesh Generator?

Free mesh gradient generator. Stacks several positioned radial gradients over a base color to create the soft, multi-point mesh backgrounds popular in modern web design. Outputs copy-paste background CSS, generated entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Gradient Mesh Generator

Name: Gradient Mesh Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Using mesh gradients on real projects

Hero sections and landing pages. The most common use is a full-viewport hero background. Set the element to width: 100%; height: 100vh; position: relative and apply the mesh as the background. The effect scales effortlessly because the colors are vector-based, not pixel-based — it will look sharp on retina and 4K screens without any additional work.

Cards and panels. A more subtle variation uses a narrow hue spread (10–20 degrees) with lower opacity per blob, creating a barely-there tonal shift across a card background. Pair with a light text color and a slight blur on the containing element for a frosted-glass effect popular in SaaS dashboards.

Animation. Because the positions are percentages, you can animate them with CSS @keyframes or JavaScript by cycling the percentage values. Moving each blob position by a few percent over several seconds gives a slow, living background with no additional asset weight. Keep the transition duration above 6–8 seconds to avoid motion sickness.

Performance considerations

Each radial-gradient layer adds a small compositing cost, but browsers handle 4–8 radial layers comfortably without hardware acceleration. Avoid applying a mesh gradient to hundreds of elements on the same page simultaneously. For frequently scrolled pages, add will-change: background only if you measure a real performance benefit — it allocates extra GPU memory that may be wasted on static meshes.

When to use an image instead

For complex, photorealistic blends or meshes with 15+ points, a pre-rendered PNG or WebP image may perform better and give you more control over the exact color positions. Use a CSS mesh for dynamic, configurable, or animated backgrounds; use a pre-rendered image when the gradient is fixed and quality is paramount.