Mesh Gradients Explained

Mesh gradients are one of the most widely used visual styles in modern UI design — found in Apple's macOS wallpapers, Stripe's marketing pages, iOS app icons, and countless SaaS landing pages. But despite their ubiquity, many designers don't know exactly what a mesh gradient is or how it works. This guide explains everything.

What is a mesh gradient?

A mesh gradient is a type of gradient where multiple color control points are placed at arbitrary positions across a canvas. Each point radiates its color outward, blending with neighboring points based on distance. The result is a smooth, multi-directional color field that transitions naturally in every direction simultaneously — unlike standard CSS gradients, which blend colors along a single axis.

The key visual characteristic is that it has no single vanishing point or axis. Colors pool and blend organically, creating the impression of light scattered across a surface — similar to the way light looks inside a soap bubble or on the inside of an abalone shell.

Where did mesh gradients come from?

Mesh gradients originated in professional vector graphics. Adobe Illustrator introduced gradient meshes in version 8.0 (1998) as part of its advanced gradient toolset. The modern flat mesh gradient style — without visible grid lines, using 4–16 soft color points on a simple canvas — became popularized around 2019–2021, driven by Figma's design community and Apple's macOS Monterey wallpapers.

How mesh gradient blending works

The most common algorithm for browser-based mesh gradients is distance-weighted interpolation (inverse-distance weighting). For each pixel on the canvas:

1. 1.Calculate the distance from that pixel to every color control point.
2. 2.Weight each color by the inverse of its distance — closer points have more influence.
3. 3.Sum the weighted colors to produce the final pixel color.

More sophisticated implementations use radial basis function (RBF) interpolation, which produces smoother transitions with better mathematical properties.

Mesh gradients vs. standard CSS gradients

Does CSS support mesh gradients?

No — there is no mesh-gradient() CSS function. The closest approximation is stacking multiple radial gradients:

background-image:
  radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.8), transparent 50%),
  radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.8), transparent 50%),
  radial-gradient(circle at 50% 80%, rgba(236, 72, 153, 0.8), transparent 50%),
  linear-gradient(135deg, #0f0f1a, #1a1a2e);

This approximation works well for 3–5 color points but diverges from true mesh blending with more points. For pixel-accurate mesh gradients, export as PNG and use it as a background image.

How to create a mesh gradient in Figma

Figma does not have a native mesh gradient fill type, but you can approximate one:

1. 1.Create a rectangle covering your canvas area.
2. 2.Add multiple circle shapes, each filled with a solid color and a large blur radius.
3. 3.Set each circle's blend mode to Normal or Screen for lighter palettes.
4. 4.Group all circles on a base color rectangle and flatten to rasterize.

Alternatively, use the Mesh Gradient Generator and export as PNG, then import into Figma as an image fill.

Design tips

• —Limit to 3–5 colors. More colors tend to produce muddy results unless carefully chosen.
• —Use analogous or split-complementary colors. Colors opposite each other blend into gray or brown.
• —Add grain for depth. A subtle grain overlay (5–15% opacity) adds texture and disguises banding artifacts.
• —Position dominant colors at the corners. They appear throughout the composition with blended intermediates in the center.
• —Use dark backgrounds. Dark bases let bright mesh colors pop more than light bases.