Skip to content
All designer tools

Mesh Gradient Generator

The soft multi-colour wash every hero uses — as stacked CSS radial gradients rather than a 400KB PNG

Click a handle to select that blob; move it with the position sliders. Everything here is percentages, so the same CSS fills a 320px card and a 2560px hero identically.

cssCSS
.mesh {
  background-color: #0b1120;
  background-image:
    radial-gradient(ellipse 62% 50% at 15% 20%, rgba(99, 102, 241, 0.70) 0%, rgba(99, 102, 241, 0) 100%),
    radial-gradient(ellipse 55% 44% at 82% 18%, rgba(236, 72, 153, 0.60) 0%, rgba(236, 72, 153, 0) 100%),
    radial-gradient(ellipse 70% 56% at 60% 88%, rgba(6, 182, 212, 0.55) 0%, rgba(6, 182, 212, 0) 100%);
}
Download
htmlTailwind classes
bg-[#0b1120] bg-[radial-gradient(ellipse_62%_50%_at_15%_20%,_rgba(99,_102,_241,_0.70)_0%,_rgba(99,_102,_241,_0)_100%),_radial-gradient(ellipse_55%_44%_at_82%_18%,_rgba(236,_72,_153,_0.60)_0%,_rgba(236,_72,_153,_0)_100%),_radial-gradient(ellipse_70%_56%_at_60%_88%,_rgba(6,_182,_212,_0.55)_0%,_rgba(6,_182,_212,_0)_100%)]

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Hand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

3
Across15%

Horizontal centre, as a percentage of the box. Blobs anchored past the edge — under 0 or over 100 — give you a partial wash bleeding in, which usually looks better than a full circle sitting in frame.

Down20%

Vertical centre. Same trick: the most convincing meshes have most of their blobs half outside the frame.

Size62%

Radius as a percentage of the box's width. Overlapping blobs are the point — where two meet is where the third colour you did not choose appears.

Strength70%

Alpha at the centre, before the fade out. Below about 40% the blob stops competing with the base colour and starts tinting it, which is usually the more expensive-looking result.

What the blobs fade into. A dark base with bright blobs is the look everyone is copying; a light base needs the blob strengths halved or it turns to mud.

Squashes each radial to 4:5 rather than a true circle. Perfect circles read as spotlights; ellipses read as light.

Emits rgba(r, g, b, 0) instead of `transparent`. They sound identical and are not: `transparent` is transparent BLACK, so a colour fading to it travels through grey and every blob gets a dirty ring. Turn this off and watch the edges.

An inline noise layer over the top. Large smooth gradients band visibly on 8-bit displays, and a little grain is the standard cure. For a real texture with controls, use the noise tool.

Preview height380px

Preview only. Meshes read completely differently at hero height and at card height — the blobs that looked balanced at 380px often crowd at 160px.

Keep this mesh. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free accountSign in

More designer tools

All 36 run in the tab — no account, no upload.See all