Build mesh gradients by placing colors anywhere on the canvas. Export as SVG ยท PNG ยท CSS.
๐ซ๏ธ Preview
How to use
- Set canvas size and blur amount.
- Pick the number of color points (3โ9); tune each color and position.
- Start from a preset (warm / cool / pastel / vibrant / brand) for quick base.
- ๐ฒ 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.