Free browser-based design tool
Free mesh gradient generator
Drag color points, shape the blend, then export images, animated video, SVG or production code. Everything runs on your device.
- No sign-up
- No watermark
- Up to 8K
- Local export
Featured gradientSpectrum One · BloomMore palettes below
Named color systems
Pick a palette. Change the composition.
Each palette has its own color system. Open one, choose a point layout, then make it yours.
Browse all 39 palettesMesh studio
Start with color. Shape the result.
Choose a named palette, switch its composition, then move every point directly on the canvas.
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 brand colors. Every point stays independently editable.
Shape the gradient
Drag points on the canvas and tune softness, grain and vignette with precise controls.
Export for anywhere
Download high-resolution images and video, scalable SVG, or code for your stack.
Built for real work
A gradient that leaves the generator.
Use one editable composition across product mockups, websites, social graphics and presentation decks.
- Free image export up to 8K
- Animated SVG and local WebM video
- CSS, Tailwind and framework code
- Social, hero, square and story sizes
Scalable and animated SVG
Editable vector layers with optional motion for sites, apps and design tools.
Code for your stack
CSS, Tailwind, React, SwiftUI, Kotlin, Flutter and React Native, all unlocked.
High-resolution images
PNG, WebP and JPG rendered on your device with no upload or watermark.
Mesh gradient basics
What makes a mesh gradient different?
A mesh gradient blends color outward from multiple points instead of along one straight line. It feels softer and more dimensional than a standard linear gradient.
Browsers do not yet have one universal CSS property for a true freeform mesh. Use layered radial-gradient CSS for practical web work, or SVG and PNG when fidelity matters more.
Good mesh gradients have structure
Start with three or four colors. Keep one color dominant and reserve the brightest accent for a smaller area. A little grain can reduce banding.
Questions, answered
Before you export.
Is this mesh gradient generator really free?
Yes. Every current image, video, SVG and code export is free without an account or watermark.
Are my colors or designs uploaded?
No. The editor renders and exports on your device. Your composition is not sent to our servers.
Is the CSS a true mesh gradient?
Not exactly. Browser CSS has no universal freeform mesh syntax, so the CSS export uses layered radial gradients. Use SVG or an image for closer visual fidelity.
Can I use exported backgrounds commercially?
Yes. You can use gradients you create in personal and commercial work. You remain responsible for any logos or assets you add.