Create smooth, organic-looking mesh gradients by dragging color nodes on a canvas. Animate them, randomize in seconds, and export as PNG, JPG, SVG, or ready-to-use CSS code — 100% free, no account required.
How to Create a Mesh Gradient
01
Choose a Preset or Start FreshPick one of 20 named presets — Sunset, Aurora, Holographic — or start with the default palette.
02
Drag Nodes to PositionMove the color nodes around the canvas. Click any empty area to add a new node at that exact spot.
03
Edit Colors & SettingsClick a node swatch to change its color. Adjust Spread, Grain, Blur, and Saturation to refine the look.
04
Export Your GradientDownload as PNG, JPG, or SVG — or switch to CSS mode and copy the radial-gradient code straight into your project.
Export Formats
PNG
Lossless raster export at 1×, 2×, or 4K resolution. Best for web images and Figma assets.
JPG
Smaller file size with minimal quality loss. Great for photography-adjacent backgrounds.
SVG
Vector format with blur filters. Scales infinitely — ideal for large-format print or web backgrounds.
CSS
Generates a radial-gradient() stack you can paste directly into your stylesheet.
Key Features
↗
Pixel-Perfect Node ControlDrag any node to any position. Click the canvas to add more. Lock nodes to freeze their position while randomizing others.
🎨
Per-Node Color & OpacityClick each node's color swatch to set an exact hex color. Adjust opacity independently per node for layered depth.
▶
Animation ModeToggle Animate to make nodes drift across the canvas in real time — great for creating animated background videos.
↩
Undo & Redo10-step history stack. Press Ctrl+Z to undo any change, Ctrl+Shift+Z to redo — full non-destructive editing.
Frequently Asked Questions
A mesh gradient is a type of gradient where multiple color points blend smoothly into each other based on their positions, creating rich, organic-looking color transitions — commonly seen in modern app backgrounds and illustrations.
Yes. All features — animation, presets, per-node color editing, undo/redo, and all export formats — are completely free with no account required and no watermarks.
Yes. Switch to CSS format in the export panel to get a radial-gradient() stack that approximates the mesh gradient as a CSS background-image property you can paste directly into your stylesheet.
You can add up to 12 nodes. Click "Add Node" in the sidebar or click any empty area on the canvas to place a new node at that position.
Spread controls how far each node's color radiates across the canvas. A low value (1–2) creates tight, defined color blobs. A high value (6–8) makes colors bleed softly across the entire canvas.
Yes. Click the lock icon on any node row in the sidebar to freeze its position. Locked nodes keep their coordinates when you use Randomize All or Randomize Positions.
Choose 4K for print-ready exports. For web backgrounds or UI assets, 2× is usually sufficient. Use PNG for transparency support or JPG for smaller file sizes.
Yes. The SVG export uses standard SVG filter elements compatible with modern design tools. Import it as an SVG asset in Figma, Illustrator, or Sketch.