What Is a Mesh Gradient? How to Create One for Free (No Design Skills Needed)

Mesh gradients are the soft, blurred color blobs you've been seeing on landing pages for the last few years. Unlike a simple two-color gradient, a mesh blends several colors at different points across the canvas for a more organic, painterly look.

Mesh gradient vs regular gradient

A standard CSS gradient blends along a single line or from a single point. A mesh gradient layers multiple radial blobs of color that overlap and blend, which is why it can't be expressed as one simple CSS property — it's typically rendered as an image or drawn on a canvas.

How CoolBG generates mesh backgrounds

The Mesh Canvas category renders each background live on an HTML5 canvas: several radial gradients in your chosen colors are composited together with a 'screen' blend mode, then a light noise texture is added so the result doesn't look overly smooth or artificial.

Static mesh vs animated mesh

A static mesh is fixed — ideal for exporting as a PNG hero image. The Animated category uses the same technique but lets the color blobs drift slowly over time, which reads as a subtle, ambient motion background rather than a distracting animation. Both respect your system's reduced-motion setting automatically.

Exporting a mesh gradient

Since a mesh isn't representable as plain CSS, export it as a PNG at your target resolution (desktop, mobile, or 4K) and use it as a standard background-image. The editor's Copy CSS button also gives you a two-color radial-gradient approximation as a lightweight fallback.