Free mesh gradient studio
Shape color
without limits.
Drag every color point, tune the grain and export the same mesh as CSS, SVG, PNG or WebP.
No sign-up. Nothing uploaded. Commercial use allowed.
50original presets
6editable color points
4export formats
0uploads or accounts
Editable starting points
Pick a mesh.
Make it yours.
These are not screenshots. Every composition opens with its original colors, points and texture settings ready to change.
View all 50 presetsOne focused engine
Everything a mesh needs. Nothing it doesn’t.
Move from first color to production asset without switching tools or rebuilding the design.
Try it in the browserShape
Place up to six independent color fields directly on the canvas.
Finish
Control softness, grain, vignette and aspect ratio without flattening the work.
Ship
Copy responsive CSS or export SVG, PNG and WebP from the same composition.
Free browser studio
Edit every color point.
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
Mesh gradient basics
Soft color fields, controlled point by point.
A mesh gradient blends color outward from several movable points instead of following one straight line. That makes it useful for dimensional website heroes, product backgrounds, posters and social graphics.
Browsers still lack one universal freeform mesh-gradient property. The studio therefore provides layered radial-gradient CSS for responsive web use, plus SVG and image exports when visual fidelity matters more.
Start simple
Use three or four colors first. Keep one dominant field, create direction with a second, then add a smaller bright accent. Add grain only after the composition works.
Straight answers
Before you export.
Is the mesh gradient generator free?
Yes. The editor and current export formats are free without an account.
Are my colors or designs uploaded?
No. Editing, saving and export happen locally in your browser.
Is the CSS a true gradient mesh?
No. It uses layered radial gradients as a practical browser-compatible approximation. Choose SVG or PNG when closer visual fidelity is required.
Can I use the result commercially?
Yes. You may use gradients you create in personal and commercial projects.