Mesh Gradient Generator
Create beautiful mesh gradients. Drag to reposition, double-click to add nodes.
Drag nodes • Double-click to add • Del to remove • Locked nodes can't be moved
Curated Mesh Gradients
Click to load or copy CSS.
Free Mesh Gradient Generator
Create stunning mesh gradient backgrounds with our free online generator. Mesh gradients feature multiple color points that blend together organically, creating the fluid, ethereal backgrounds you see on modern websites and apps like Stripe, Linear, and Vercel. Unlike traditional linear gradients, mesh gradients offer infinite creative possibilities with their multi-directional color transitions. Perfect for landing pages, hero sections, social media graphics, and app backgrounds. Export directly to CSS or download as high-resolution PNG, JPG, or WebP images.
Key Features
Drag & Drop Editing
Intuitively position color nodes by dragging them directly on the canvas for pixel-perfect placement.
Multi-Color Blending
Blend 4+ colors together for complex, ethereal gradients that can't be achieved with linear gradients.
Export Options
Download as PNG, JPG, or WebP in multiple sizes including Instagram, Twitter header, and desktop wallpaper.
Filter Controls
Fine-tune blur, contrast, brightness, saturation, and grain effects for the perfect look.
Copy CSS Code
Get the exact CSS code to recreate your mesh gradient in any web project.
Preset Library
Start from 16+ curated mesh gradient presets and customize them to your needs.
How to Create Mesh Gradients
- 1
Start with a preset or create a fresh canvas with the default 4 color nodes.
- 2
Click on a color node to select it, then use the color picker in the sidebar to change its color.
- 3
Drag nodes directly on the canvas to reposition them and create your desired blend effect.
- 4
Adjust the spread, opacity, and blend mode of each node for fine control over color mixing.
- 5
Use the filter controls (blur, contrast, grain) to add depth and texture to your gradient.
- 6
Export as an image or copy the CSS code to use in your web project.