Build mesh gradients by placing colors anywhere on the canvas. Export as SVG · PNG · CSS.
🌫️ Preview

How to use

  1. Set canvas size and blur amount.
  2. Pick the number of color points (3–9); tune each color and position.
  3. Start from a preset (warm / cool / pastel / vibrant / brand) for quick base.
  4. 🎲 Random for inspiration, or export as SVG / PNG / CSS.

Key features

  • 3–9 freely-placed color points (color + position)
  • 5 presets + random shuffle
  • Blur 20–300 adjustable
  • SVG · PNG · CSS (multiple radial gradient) export
  • Up to 1920×1920 high-res output

Use cases

  • Website hero backgrounds — abstract, modern vibe
  • App splash screens — soft visual effect
  • Notion / Linktree banners — trendier than static photos
  • Product ad backgrounds — rich background, text-readable
  • Slides / presentations — backdrop fills

What is a mesh gradient?

A mesh gradient places multiple color points and smoothly interpolates between them. More organic than linear/radial — perfect for realistic, fluid color flows. Popularized by Adobe Illustrator's Mesh Tool and Figma's new feature. This tool composites multiple SVG <radialGradient> with a feGaussianBlur filter. A 2024 trend in SaaS landing-page heroes.

FAQ

Why is PNG bigger than SVG?

PNG is pixel raster; SVG is vector code + filter. SVG feGaussianBlur may render slightly differently across environments — PNG is often safer.

Pure CSS possible?

Yes — the CSS export uses multiple radial-gradient stacked for a similar effect. backdrop-filter: blur can be applied to children.

Retina-ready?

SVG and CSS scale natively. Download PNG at 2× size for hi-DPI use.

Free?

Yes.