Mesh Gradient Generator

Paint silky mesh gradients the Stripe way — drag color blobs around the canvas, shuffle harmonious palettes, add film grain, then export pure-CSS radial gradients, a standalone SVG, or a PNG.

Preview

Drag the dots to move each color. Click a dot to recolor or remove it.

Mesh

Blend reach55%

Color strength90%

Base color

#0f172a

Film grainA layer of SVG noise over the blend — kills color banding.

Export

Pure CSS radial gradients, or a standalone SVG for Figma.

.mesh {
  background-color: #0f172a;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(124, 58, 237, 0.90) 0px, rgba(124, 58, 237, 0) 55%),
    radial-gradient(circle at 82% 14%, rgba(6, 182, 212, 0.90) 0px, rgba(6, 182, 212, 0) 55%),
    radial-gradient(circle at 70% 84%, rgba(236, 72, 153, 0.90) 0px, rgba(236, 72, 153, 0) 55%),
    radial-gradient(circle at 25% 78%, rgba(34, 211, 238, 0.90) 0px, rgba(34, 211, 238, 0) 55%);
}