Mesh gradient generator
Build the soft, blended backgrounds you see on modern websites. Place up to six colors, adjust softness, randomize until it looks right, then copy the CSS — layered radial gradients that work in every browser — or download a full-HD PNG.
How to use the mesh gradient
- Start from the default or press “Random mesh”.
- Change each color and move it with the X and Y sliders.
- Adjust softness to blend the colors more or less.
- Copy the CSS or download a PNG.
How mesh gradients work in CSS
CSS has no native mesh gradient, but you can get the same look by stacking several radial gradients — each a color fading to transparent — on top of a background color. The output is plain CSS with no images, so it stays sharp at any size and weighs almost nothing.
Frequently asked questions
Is the CSS mesh gradient supported in all browsers?
Yes. It uses layered radial-gradient() backgrounds, supported by every modern browser.
Can I use the PNG commercially?
Yes, anything you make here is yours to use.