Mesh Gradient Generator

Generate soft, multi-colour mesh gradients using layered CSS radial gradients. Randomise until you like it, then copy the CSS.

Mesh gradients are built from several radial gradients layered over a base colour. The result is pure CSS, so it scales to any size, needs no image, and stays crisp on every screen.

Frequently asked questions

What is a mesh gradient?

A mesh gradient blends several colours from different points so they fade into one another, giving a soft, modern, almost painterly background. This tool fakes the effect with layered CSS radial gradients, so no image is needed.

Is the output really just CSS?

Yes. It is a base background-color plus a stack of radial-gradient layers in background-image. Paste it onto any element. Because it is CSS, it is resolution-independent and adds almost nothing to your page weight.

How do I get a colour scheme I like?

Click Randomise for a fresh palette and layout, and change the number of colour points for more or less complexity. When you find one you like, copy the CSS.