Skip to content
Musterli

Mesh Gradient

Soft, flowing color gradients from several blurred color fields. Export as PNG, JPG, WebP, SVG or CSS.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Mesh Gradient

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A mesh gradient blends several colors across a surface instead of along a single line. The result looks like soft, flowing light and suits website heroes, app backgrounds, slides and social media posts.

How it works

Pick your colors and a background, choose how many color fields to mix and how strongly to warp and blur them, and add some grain if you like. Press Space for a new arrangement. Then export as PNG, JPG, WebP, SVG or CSS in the size you need.

Try the Mesh Gradient now

FAQ

How is a mesh gradient different from a normal gradient?
A linear or radial gradient runs along one line or out from one point. A mesh gradient places several colors freely on the surface and blends them softly, so it looks organic rather than technical.
Can I edit the SVG in a design app?
The SVG contains plain shapes and one standard Gaussian blur filter, which browsers and many design apps can display. Support for SVG filters varies between editing apps, so if the blur looks different there, use the PNG export.
Why is there grain on the gradient?
Fine grain gives the surface a soft, analog look and hides banding, the visible steps in smooth gradients. Set Grain to 0 for a perfectly smooth result.
Does the export look like the preview?
Yes. Preview and export use the same graphic, and the arrangement is computed from the seed. The same settings and seed always give the same gradient.

Ready-made gradients

More than 30 original gradients with CSS to copy, each one ready to adjust in the editor.

Browse the gradient collection

Related generators

All generators in Gradients