Choose your colors
Start from a curated palette or add your brand colors. Each color stays independently editable.
Free. Private. No sign-up.
Mesh gradients,
shaped by you.
Create rich, organic backgrounds by moving color — not wrestling with code. Export clean CSS, SVG or high-resolution PNG in seconds.
- Live editable points
- Production-ready exports
- Runs entirely in your browser
Free browser studio
Shape color, not complexity.
Drag the color points directly on the canvas. Every change stays editable, private and ready to export.
Untitled gradientSaved locally
Desktop hero1600 × 1000
YOUR NEXT IDEA Designed to feel alive.
Drag points to compose · Double-click the canvas to add color
A calmer creative workflow
From blank canvas to shipped background.
Shape the gradient
Drag points on the canvas and tune softness, grain and vignette with precise controls.
Export for anywhere
Download a high-resolution image or copy layered CSS for your website and app.
Built for real work
A gradient that leaves the generator.
Use one editable composition across product mockups, websites, social graphics and presentation decks.
- Transparent, honest export formats
- Cross-browser CSS approximation
- High-resolution canvas rendering
- Responsive ratios for hero, square and story
Production CSS
Layered radial gradients with a clear note when the browser result is an approximation.
Scalable SVG
Editable vector layers for design tools, sites and resolution-independent graphics.
High-resolution PNG
Pixel-perfect output from the same canvas you previewed, without uploading your work.
Mesh gradient basics
What makes a mesh gradient different?
A mesh gradient blends color outward from multiple points rather than along one straight line. The result feels softer and more dimensional than a standard linear gradient, while staying abstract enough for interface backgrounds, posters and brand graphics.
Browsers do not yet offer one universal CSS property for a true freeform gradient mesh. This generator provides layered radial-gradient CSS as a practical web approximation, plus SVG and PNG when visual fidelity matters more.
Good mesh gradients have structure
Start with three or four colors. Keep one color dominant, use a second to create direction, and reserve the brightest accent for a smaller area. Grain can reduce visible banding, but a little goes a long way.
Questions, answered
Before you export.
Is this mesh gradient generator free?
Yes. The editor and current export options are free to use without creating an account.
Are my colors or designs uploaded?
No. The current editor renders and exports locally in your browser. Your composition is not sent to our servers.
Is the CSS a true mesh gradient?
Not exactly. Current browser CSS has no universal freeform mesh-gradient syntax, so the CSS export uses layered radial gradients. Use PNG or SVG when you need closer visual fidelity.
Can I use the exported background commercially?
Yes. You can use gradients you create in personal and commercial projects. You remain responsible for colors, logos or assets you introduce.