How are mesh gradients created technically?

Mesh gradients use layered radial gradients with partial transparency, positioned to blend into one another smoothly across the canvas.

Can I export as an SVG?

SVG export is available for simple mesh configurations. Complex meshes are exported as PNG for best fidelity.

The CSS implementation using stacked radial gradients works in all modern browsers. Very old browsers may not render the blending correctly.

The tool exports static CSS. To animate, you can apply CSS animations to individual radial-gradient background-position properties.

Choose colors and blend them into a smooth mesh gradient, then export as CSS or PNG.

Color 1

Color 2

Color 3

Color 4

Choose colors and blend them into a smooth mesh gradient, then export as CSS or PNG.

Last updated: 2026-07-01 · Reviewed by Nham Vu