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

Guía: Generador de Gradientes Mesh

¿Qué es?

Un gradiente mesh es un fondo orgánico creado por múltiples puntos de color con radios de gradiente que se mezclan mediante modo de fusión "screen". Popularizados por Apple y Stripe, crean fondos visualmente ricos sin imágenes pesadas.

Cómo usar

Elige un preset (Aurora, Ocean, Sunset, etc.).
Arrastra los puntos en el canvas para reposicionarlos.
Haz clic en un punto para cambiar su color.
Exporta como PNG, CSS o SVG.

Consejos

La exportación CSS genera capas de radial-gradient() compatibles con todos los navegadores modernos.
Para hero sections, exporta PNG para mejor calidad visual.
Colores análogos crean transiciones más armoniosas que complementarios.