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.