Mesh Gradient Generator
Drag control points, blend smooth color fields, copy CSS or download PNG — free in your browser.
A free online mesh gradient generator and mesh gradient maker for developers. Drag colorful points to design a smooth mesh gradient background, tune per-point softness, then export as CSS mesh gradient code, Tailwind classes, SVG, or PNG. This tool runs entirely client-side — no signup.
What is a mesh gradient?
A mesh gradient is a soft, multi-color background where several color points blend together across a surface. Unlike a single linear or radial gradient, each point can sit anywhere and pull its color into the surrounding area — the organic, liquid look behind many modern hero sections and app UIs.
CSS mesh gradients — the honest version
Pure CSS has no primitive for smooth 2D scattered-point interpolation. Every mesh gradient CSS snippet in the wild — including what this tool exports — is a stack of layered radial-gradient() functions. That is a close approximation, but the live preview above uses a smoother canvas blend. When you need pixel-perfect output, download PNG; when you need portable markup, use SVG.
Export formats
CSS — copy a background-color plus layered background-image declarations. Labeled as an approximation.
Tailwind — arbitrary-property classes you can paste straight onto an element.
SVG — self-contained markup with radial gradients and blur, useful for design handoff.
PNG — raster export at 400px, 800px, or 1600px — best match to the live preview.
Related tools
Need grid, pattern, or particle backgrounds too? See the Background Generator. For linear and conic gradients, try the CSS Gradient Generator. Fine-tune a point's exact shade with the OKLCH Color Converter.
Frequently asked questions
What is a mesh gradient?
A mesh gradient blends several color points across a surface into soft, organic fields — the multi-color backgrounds popular on modern product pages.
Can I make a mesh gradient with pure CSS?
Not exactly — CSS approximates mesh gradients with stacked radial-gradient() layers. This tool exports that honestly. For the smoothest result, use PNG or SVG export.
Does this work in Figma?
No — this is a browser tool for web developers. For Figma, use a dedicated mesh gradient plugin.
Is this free, and does it store my colors?
Yes, completely free with no signup. Everything runs client-side — nothing is uploaded. Share links encode the mesh in the URL only.
How is this different from your Background Generator?
This page is the dedicated drag-and-export mesh gradient editor. The Background Generator also does grid, pattern, and particle modes in one tool.
Related tools: CSS Gradient Generator · Box Shadow Generator · Cubic Bezier Generator · All Tools →
