🌈 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.

Guide : Générateur de Dégradé Mesh

Qu'est-ce que c'est ?

Le Générateur de Dégradé Mesh crée des arrière-plans de dégradé mesh colorés et organiques avec des points de contrôle éditables — populaires dans les designs modernes de landing pages.

Les dégradés mesh combinent plusieurs couleurs de manière fluide et naturelle, créant des effets impossibles avec les dégradés CSS standard.

Comment utiliser

Cliquez sur les points de contrôle pour modifier les couleurs.
Faites glisser les points pour repositionner les centres de couleur.
Ajoutez ou supprimez des points de contrôle.
Exportez en SVG, PNG ou copiez le code CSS.

Conseils professionnels

Utilisez 3-5 couleurs analogues pour des transitions harmonieuses.
Les dégradés mesh SVG exportés sont scalables et légers pour le web.