Free. Private. No sign-up.
Mesh gradients,
shaped by you.
Move the color points, adjust the texture and export the result as CSS, SVG or a high-resolution image.
- Live editable points
- Production-ready exports
- Runs entirely in your browser
Original starting points
Pick a preset.
Change everything.
Every preset keeps its color points and settings. Open one, move the points and export your version.
Browse all 50 presetsFree browser studio
Edit every color point.
Drag the color points directly on the canvas. Every change stays editable, private and ready to export.
Live canvas1600 × 1000
YOUR NEXT IDEADesigned to feel alive.
Drag the rings to shape the mesh · Double-click to add a color
A calmer creative workflow
From blank canvas to shipped background.
Choose your colors
Start from a curated palette or add your brand colors. Each color stays independently editable.
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.