Mesh Gradient Generator

Create beautiful mesh gradients with layered radial gradients. Drag points on the preview to reposition them.

CSS

background-color: #000000;
background-image:
    ;

Color Points: 4

Base Color

Global Softness: 100%

Point Controls

Export as PNG

Size

How It Works

Add color points

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

Customize

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

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.

Designing a product?

Map out your user personas and feature set before you build — run a Discovery session.

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.