What is a Mesh Gradient (and How to Make One in CSS)
The buttery, multi-color backgrounds you see on Stripe, Linear, and Vercel are mesh gradients. Here is how they work, and how to build one without leaving the browser.
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
transparentat 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.