How to Build a Mesh Gradient Background That Actually Looks Designed

If you have looked at a Stripe, Linear, or Vercel landing page in the last two years and wondered how the hero glows like spilled paint, the answer is a mesh gradient. It is the single most copied background style of the modern web, and almost nobody who copies it understands what makes it tick. This post walks through what a mesh gradient really is, why it does not look like a normal CSS gradient, and how to build one you can drop behind a hero or a section divider today.

A Linear Gradient Goes One Way. A Mesh Goes Every Way.

Start with the thing you already know. A linear gradient fades color along a single straight axis: top to bottom, left to right, or at some angle. A radial gradient is only slightly richer, fading outward from one center point in concentric rings. Both are one-dimensional in spirit. You pick a direction, you pick stops, color slides from A to B. There is exactly one path the color can take.

A mesh gradient throws that out. Here is the concrete mechanic: a mesh gradient stacks several radial gradients at different positions on the same surface, so the colors blend in two dimensions instead of along one axis. Picture four or six soft circles of color, each anchored at a different spot on the canvas, each bleeding into its neighbors. A pixel in the middle is not "70% of the way from blue to pink." It is a weighted blend of the blue blob up and to the left, the pink blob down and to the right, the teal blob hugging the bottom edge, and so on. That two-dimensional blending is why a mesh reads as organic and atmospheric while a linear gradient reads as flat and mechanical.

The high-fidelity version of this idea, used by Adobe Illustrator's mesh tool, interpolates every pixel as a true bilinear (or bicubic) average of its four nearest control points. The browser-friendly version layers soft radial gradients additively. Both land in the same neighborhood visually, and for a web background the layered-radial approach is the practical one because it is plain CSS.

Layering Color Blobs: the Worked Example

Let me show you the actual mechanism. Each "blob" is one radial-gradient with a soft falloff, positioned somewhere on the box, fading to transparent so the layers below show through. Stack four or five of them and you have a mesh:

.mesh-hero {
  background-color: #0b0f1a;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #06b6d4 0px, transparent 50%),
    radial-gradient(at 25% 80%, #ec4899 0px, transparent 55%),
    radial-gradient(at 75% 72%, #22d3ee 0px, transparent 45%),
    radial-gradient(at 50% 50%, #6366f1 0px, transparent 60%);
}

Read that top to bottom. The background-color is the floor everything settles onto, so the page never flashes white. Each radial-gradient is one color blob: at 18% 22% places its center near the top-left corner, the color is solid at the center (0px), and transparent 55% means it has fully faded out by 55% of the gradient's radius. Because every layer ends in transparent, the blobs overlap and mix wherever they meet. Move a percentage pair and the blob slides. Change a color and that whole region shifts hue. Add a sixth radial-gradient line and you add another light source. That is the entire grammar.

Two knobs matter more than the rest. First, the falloff percentage: a smaller number like transparent 40% gives a tight, punchy glow; a larger transparent 65% spreads the color into a soft wash. Second, position spacing: keep the centers from clustering or the whole thing muddies into brown. Three to six well-spaced blobs is the sweet spot.

When I Stopped Hand-Editing the Percentages

I used to build these by hand, and I want to be honest about how that went. The first hour is fun. You nudge a blob from 20% to 28%, refresh, decide it was better at 24%, refresh again. By the third color I had a tab graveyard of "almost right" gradients and a headache, because moving one blob changes how it reads against all the others — it is a four-body problem, not a slider. The thing that actually fixed my workflow was dragging the control points on a live canvas instead of editing numbers, then letting the tool emit the CSS. I drag the purple blob until it sits behind the headline, drag the teal off the bottom edge so it bleeds away, and copy out the exact radial-gradient stack above. That is the loop the Gradient Mesh Generator is built around, and it turned a 40-minute fiddle into a two-minute task. If you only need a simple two-stop fade rather than a full mesh, the plain Gradient Generator is the lighter tool for that job.

Using a Mesh as a Hero or Section Backdrop

A mesh gradient is decoration, so treat it like decoration. The strongest place for one is a hero section: full-bleed background, big headline sitting on top, a single call-to-action button. The soft glow gives the section depth without an image asset, which means no stock-photo licensing, no slow-loading hero JPEG, and infinite scaling because it is pure CSS or a tiny SVG.

Section dividers are the other natural fit. Drop a muted mesh behind a "what people are building" strip or an empty-state panel on a dashboard, and the page stops feeling like a wireframe. For these secondary spots, dial the colors down — lower saturation, closer hues — so the mesh supports the content instead of shouting over it.

The one rule I will not let you skip: do not put body text directly on a busy mesh and expect it to pass contrast. A mesh is colorful by design, and WCAG contrast is measured per pixel against the text, so a passage that is readable over the blue blob fails over the pink one. The practical fixes are to spread the blobs into a softer wash so the underlying color is more uniform, or to set a semi-transparent panel behind the text and measure contrast against that panel instead of the raw gradient. Mesh gradients are for atmosphere; text legibility lives on a calmer surface.

A Quick Checklist Before You Ship

Three to six color blobs, well spaced. More than that muddies to brown.
Every layer fades to transparent so blobs actually blend.
A solid background-color underneath as the floor.
Decorative only — keep body copy on a panel or a solid sibling block.
Export once, reuse everywhere: the same mesh works at 16:9 for a hero and 9:16 for a vertical card.

Once you understand that a mesh is just several radial gradients sharing one surface, the mystique evaporates and it becomes a tool you reach for whenever a section needs life. Build one, copy the CSS, and move on to the rest of the page.

Made by Toolora · Updated 2026-06-13