Design

Mesh gradient generator

Blend your palette into soft, flowing color fields for backgrounds, hero sections and wallpapers.

Your palette

2D0A126B1426A63446E4C9B8FAF3EA

Shape

Color fields · 6Softness · 60% Film grain

CSS

background-color: #2D0A12;
background-image:
  radial-gradient(at 19% -11%, #2D0A12 0px, transparent 75%),
  radial-gradient(at 40% 17%, #6B1426 0px, transparent 49%),
  radial-gradient(at 78% 3%, #A63446 0px, transparent 49%),
  radial-gradient(at 18% 40%, #E4C9B8 0px, transparent 60%),
  radial-gradient(at 61% 48%, #FAF3EA 0px, transparent 50%),
  radial-gradient(at 103% 60%, #2D0A12 0px, transparent 69%);

The CSS is a close, lightweight version of the look: a base color with overlapping radial gradients. Use the SVG or PNG for the exact picture, with softness and grain.

Frequently asked questions

What is a mesh gradient?

A gradient made of several soft color fields blended together, instead of one straight line from color to color. It gives the flowing, glowing look popular for backgrounds.

Can I use the result commercially?

Yes. The picture is made from your own colors and a random pattern, so it is yours to use.

Why does the CSS look slightly different from the download?

The CSS uses overlapping radial gradients, which are light and fast but cannot blur or add grain. The SVG and PNG are the exact picture.

Frequently asked questions

More color tools