What is a mesh gradient?
The soft, multi-point color blend behind half of modern web design — explained.
Updated · 4 min read
A mesh gradient is a color blend controlled by a grid of points rather than a single direction or center. Each point carries its own color and pulls the blend toward itself, so instead of the straight bands of a linear gradient or the rings of a radial one, you get soft, organic pools of color that melt into each other — the aurora-like backgrounds you see on modern landing pages, app store screenshots, and album art.
Why it looks different from normal gradients
A linear gradient interpolates colors along one axis; a radial gradient interpolates outward from one center. Both are global: one rule describes the whole image. A mesh instead gives every control point local influence — the blend near a point is dominated by that point's color, and the space between points is a smooth two-dimensional interpolation of all its neighbors. That local control is what produces the characteristic "several glowing patches of color on one canvas" look, and why no single linear or radial gradient can imitate a mesh with more than a couple of colors.
The CSS secret: browsers can't draw real meshes
True gradient meshes exist in vector tools — Adobe Illustrator has had one for decades, and SVG 2 once
proposed a native <meshgradient> element, but browsers never shipped it. Every "mesh
gradient" you see on the web is an approximation, and the standard technique is beautifully simple:
several radial gradients stacked in one background-image, each positioned where
a mesh point would be and fading to transparent, over a solid base color.
Stack four or five of those and the overlapping falloffs blend exactly like mesh patches. It's pure CSS, a few hundred bytes, works in every browser, and animates cheaply — which is why it became the de facto way to ship the look in production.
Design rules that keep meshes classy
- Pick neighbors on the color wheel — blues into purples into pinks. Opposing hues mix into gray mud where their falloffs overlap.
- Vary the point sizes — one large dominant pool plus smaller accents reads as designed; equal-sized blobs read as random.
- Keep contrast in reserve — if text sits on top, keep one region of the mesh calm and dark (or light) enough to hold a readable contrast ratio.
- Add a whisper of noise if you see banding on large soft areas — a subtle grain texture breaks up the stepping on cheap displays.
Make one instead of hand-coding it
Hand-tuning stacked radial gradients means guessing coordinates, re-checking falloff overlaps, and repeating per breakpoint. A generator lets you drag the mesh points visually, pick a palette, and export the finished thing as CSS (plain or Tailwind), SVG, or a wallpaper-sized PNG — which is exactly what our editor does, free, in your browser, with nothing uploaded.