What is Mesh Gradient Generator?

Generate multi-color mesh gradients for website backgrounds, social media graphics, and UI designs. Pick your colors, position the control points, and get organic gradients that go beyond simple linear or radial patterns.

The canvas overlays multiple radial gradients, one per control point. Drag a point to reshape the blend, swap its colour with the swatch, and the code updates live. Up to six points keep the result balanced. Export as PNG or SVG at hero-banner sizes like 1920x1080, copy the SVG straight into Figma, or grab the code as CSS, SCSS, or Tailwind.

How to use

1. Choose your base colors by clicking the color swatches or entering hex values. Add up to 6 color control points.
2. Drag the control points on the canvas to change how the gradient flows.
3. Copy the code as CSS, SCSS, or Tailwind, or download the gradient as a PNG or SVG.

When to use

• Designing a hero background that does not look like a stock template.
• Building product card or playlist artwork that needs colour without imagery.
• Generating placeholder backgrounds for app loading screens and empty states.

Result

A UI designer creates a purple-to-teal mesh gradient with 4 control points for a landing page hero section, then copies the CSS to paste directly into their stylesheet.

FAQ

What is the difference between a mesh gradient and a linear gradient?

A linear gradient blends two colours along one axis. A mesh gradient overlays multiple soft colour spots, so the result feels closer to a watercolour wash than a clean fade. It is harder to spot the boundary between colours.

Why does the CSS use radial-gradient instead of conic-gradient?

Stacked radial gradients have the widest browser support and degrade cleanly. The generator emits one radial-gradient per control point and blends them with background-image stacking, which works in every modern browser without polyfills.

Will my mesh gradient look the same in Safari and Chrome?

Yes. The output uses standard CSS radial-gradient with no vendor prefixes needed. Safari, Chrome, Firefox, and Edge all paint identical results. Older browsers fall back to the first colour.

How many control points can I use?

Up to six. Adding more usually makes the blend muddier, not richer. Two or three points give cleaner art-deco style gradients; four to six produce more painterly washes.

Can I export the gradient as an SVG?

Yes. The SVG export builds the gradient from stacked radial-gradient layers, so it renders anywhere CSS gradients do and pastes straight into Figma as a shape fill. The true spec-level SVG mesh gradient still isn't supported anywhere, which is why this stacked approach is the version that actually works wherever you paste it.

Related Tools