TTULAKITO
Designer

Mesh Gradient Generator

Create modern mesh gradients with multiple radial color stops.

All tools

Mesh

CSS

background-color: hsl(56 60% 50%);
background-image:
  radial-gradient(at 51% 18%, hsl(56 74% 61%) 0px, transparent 50%),
  radial-gradient(at 93% 1%, hsl(320 74% 60%) 0px, transparent 50%),
  radial-gradient(at 28% 79%, hsl(147 86% 73%) 0px, transparent 50%),
  radial-gradient(at 45% 18%, hsl(155 95% 62%) 0px, transparent 50%),
  radial-gradient(at 25% 60%, hsl(39 99% 66%) 0px, transparent 50%);

Frequently asked questions

What is a mesh gradient?
A mesh gradient blends multiple color points spread across a 2D plane, producing soft, painterly transitions that simple linear gradients can't match. In CSS, they're approximated by stacking several radial-gradient layers.
How do I export a mesh gradient for use outside CSS?
Take a screenshot at your target resolution and save as PNG, or rasterize the CSS to canvas. True vector mesh gradients require SVG 2 or design tools, since SVG 1.1 doesn't support them.
Why are mesh gradients trendy in modern UI?
They feel organic and soft compared to the hard edges of flat design, and they cover large hero areas without looking repetitive. They also hide JPEG compression artifacts well, which helps file sizes on landing pages.