Design Atlas
한국어
✦ Visual effects

Mesh gradient

메시 그라데이션

Several colour points layered across a grid so they blend into one smooth field — the multi-hue background style popularised by Stripe and Linear.

Also known as: Mesh gradient backgroundColor mesh
···
html
<div class="mesh"></div><span class="label">Mesh</span>
css
.mesh{position:absolute;inset:-15%;background:
  radial-gradient(at 20% 25%,#ff5c8a 0,transparent 50%),
  radial-gradient(at 80% 15%,#5b5bf7 0,transparent 50%),
  radial-gradient(at 15% 80%,#18c29c 0,transparent 50%),
  radial-gradient(at 85% 85%,#ffb648 0,transparent 50%),
  radial-gradient(at 50% 50%,#a855f7 0,transparent 60%);
  filter:blur(6px) hue-rotate(0deg);animation:hue 14s linear infinite}
@keyframes hue{to{filter:blur(6px) hue-rotate(360deg)}}
.label{position:relative;color:#fff;font-size:32px;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.35)}

A single gradient blends only two colours; a mesh gradient layers several radial-gradients at different positions and colours so they bleed into one smooth field, each fading to transparent so they melt together.

Slowly rotating the whole thing through hue-rotate gives a flowing colour shift. CSS can't do true triangulated mesh interpolation — this is an approximation by stacking radial-gradients. Tools like Figma's Mesh Gradient plugin or CSS Houdini can produce a more precise version.

When to use

Use for hero backgrounds, OG images, brand backgrounds. If placing text on top, contrast shifts because light and dark areas aren’t fixed — prepare an overlay or a fixed text colour.