SVG mesh gradient. Vector = infinite scale + tiny file.
🎨 Preview

How to use

  1. Pick 4 corner colors.
  2. Set width and height.
  3. Adjust blur for softness (80 recommended).
  4. Download SVG or PNG.
  5. SVG can be embedded directly in HTML.

Key features

  • SVG filter blur (vector)
  • 4-color radial composite
  • 5 presets
  • Infinite scale
  • Embed directly in HTML/CSS

Use cases

  • Website backgrounds — tiny SVG file
  • Print — scales without pixelation
  • Figma / Illustrator — vector editing
  • SVG masks — text / shape backgrounds
  • Email — some clients support SVG

SVG vs PNG mesh

This tool outputs true vector SVG. Four radial gradients + feGaussianBlur composite. Pros: (1) tiny file (~2 KB) (2) infinite scale (3) CSS-editable colors. Cons: some older browsers limit SVG filters. Provide PNG too for safety.

FAQ

Difference from mesh-gradient?

mesh-gradient outputs PNG (raster); this outputs SVG (vector). Pick by use case.

How to embed SVG?

"Copy SVG" → paste into HTML, or reference as `<img src="mesh.svg">`.

Change colors in SVG?

Open SVG and edit `stop-color`. CSS variables also work.

Free?

Yes.