Mesh Gradient Generator

Create beautiful mesh gradients with custom colors and positions. Export as CSS background-image or PNG at custom resolution.

How It Works

1

Add color points

Use the slider to set 2-6 color points. Each creates a radial gradient layer.

2

Customize

Pick colors, drag points on the preview to reposition, and adjust softness for blending.

3

Export

Copy the CSS code for your stylesheet, or download as a PNG image at your chosen resolution.

FAQ

They layer multiple radial-gradient() CSS functions at different positions, creating organic, flowing color blends.
Absolutely. The generated CSS uses standard background-image with radial-gradient(), supported by all modern browsers.
Preset sizes: 1920×1080, 1080×1080, 1080×1920. You can also set custom dimensions. For geometric patterns instead of gradients, try the CSS cover art generator.

Built & Maintained by Varstatt

Varstatt is a one-person product studio run by Jurij Tokarski, product engineer since 2011. These tools are free and open — no signup, no catch.