🌈 Mesh Gradient Generator

Create stunning mesh gradient backgrounds with draggable color points, 12 presets, and one-click export to PNG, CSS, and SVG. Free mesh gradient generator.

Selected point color: Drag to reposition · Click to select

How to Use

Pick a preset or start fresh

Choose one of 12 built-in presets from the dropdown, or click + Add Point to place your own color points.

Drag and recolor

Click any circle to select it, drag to move it. Use the color picker or hex input to change its color. The gradient updates live.

Export

PNG downloads the canvas at full resolution. CSS gives you copy-ready radial-gradient code. SVG exports a scalable vector version.

Frequently Asked Questions

What is a mesh gradient? +

A mesh gradient is a multi-point gradient where each control point has its own color and position. Colors blend smoothly between all points, creating organic, multi-directional color transitions unlike simple linear or radial gradients.

Can I use the CSS output directly in my project? +

Yes. The CSS export generates stacked radial-gradient layers with background-color as a fallback — compatible with all modern browsers. Paste it directly into any element's style.

How many color points can I add? +

There is no hard limit. Each point adds one radial gradient layer. For performance, 4–8 points is the practical sweet spot for smooth rendering.

Does the SVG export preserve the exact gradient? +

Yes. The SVG uses feBlend/screen compositing to replicate the canvas rendering. It scales to any resolution without pixelation.

संपूर्ण गाइड: Mesh Gradient Generator