What is a Mesh Gradient (and How to Make One in CSS)

The look

A mesh gradient is a smooth blend of three or more color points placed anywhere on a 2D surface. Unlike a linear gradient (a straight color sweep) or a radial gradient (one center, one outer color), a mesh gradient has no fixed direction. Each color softly fades into its neighbors.

The CSS trick

True mesh gradients are not a single CSS property - yet. The pragmatic approach is stacking several large, soft radial-gradient() layers on top of each other:

background:
radial-gradient(at 20% 30%, #ff7ad9 0%, transparent 50%),
radial-gradient(at 80% 20%, #7c5cff 0%, transparent 50%),
radial-gradient(at 60% 80%, #00d4ff 0%, transparent 50%),
#0b0b10;

Each layer is a giant blurred dot. Together they approximate the look of a real mesh gradient with zero JavaScript and perfect performance.

Tips for production-ready meshes

Pick three to five colors. Two looks like a regular gradient; six gets muddy.

Use OKLCH siblings. Colors at similar lightness blend more cleanly than colors with very different L values.

Keep one anchor. Layer the meshes on top of a solid background color so dark/light mode stays predictable.

Fade out at edges. Use transparent at 50-70% so layers blend into each other instead of clipping.

Where mesh gradients shine

Hero backgrounds for landing pages.

Empty-state illustrations.

Card overlays behind product screenshots.

OG/social cards (much more attention-grabbing than a flat color).

Drop colors anywhere on a canvas and copy the CSS in our Mesh Gradient tool.