mesh gradient generator

How to use the mesh gradient generator

  1. Drag mesh control points on the preview canvas to position color stops.
  2. Click a point to change its color. Add up to 8 points for rich multi-directional gradients.
  3. Adjust blur radius to control how sharp or diffuse each blend becomes.
  4. Copy CSS — output uses stacked radial-gradient() or @property CSS for smooth transitions.

When to use it

Use mesh gradients for modern hero backgrounds, auth page visuals, and dashboards that want polish without a stock-photo feel. Stripe, Linear, and Vercel pioneered this aesthetic. Don't use for body backgrounds — the color shifts can clash with content. Alternative: MeshGradient.com covers the same niche; this tool adds Tailwind output.

Frequently asked questions

Are mesh gradients performant?
Stacked radial gradients are GPU-friendly but can cost paint time on large surfaces. Use them on small hero sections, not full-page backgrounds with scroll.
Can I export as SVG?
Yes — the tool can export as both CSS and SVG with feGaussianBlur for smooth blending.
How do I animate a mesh gradient?
Use @property with the new CSS custom property animation syntax. Chrome 85+ and Safari 16.4+ support it; older browsers see a static fallback.

Related generators

  • Free Gradient Generator
  • Free Glassmorphism Generator
  • Free Animated Background Generator
  • Free Blob Shape Generator

Last updated: 2026-04-23