CSS Gradient Generator

CSS Mesh Gradients

What is a Mesh Gradient?

A mesh gradient blends several colors as independently positioned blobs across a background, rather than shifting along one line (linear) or out from one center (radial). It's the trendy, organic-looking style behind a lot of modern app and landing page backgrounds.
CSS has no dedicated syntax for this. It's built from ordinary radial-gradient() layers, each one placed at its own coordinate and faded to transparent, stacked in a single background property with a flat color as the final layer.


Syntax

background:
  radial-gradient(at x1% y1%, color1, transparent 70%),
  radial-gradient(at x2% y2%, color2, transparent 70%),
  ...,
  base-color;

Example

background: radial-gradient(at 20% 30%, #FF6B6B, transparent 70%), radial-gradient(at 80% 20%, #4D96FF, transparent 70%), radial-gradient(at 50% 80%, #FFD93D, transparent 70%), #FFFFFF;

Result



More examples

background: radial-gradient(at 30% 30%, #FF512F, transparent 70%), radial-gradient(at 70% 35%, #F09819, transparent 70%), radial-gradient(at 50% 80%, #C21500, transparent 70%), #0D0D0D;

background: radial-gradient(at 20% 20%, #A6C1EE, transparent 70%), radial-gradient(at 80% 20%, #FBC2EB, transparent 70%), radial-gradient(at 20% 80%, #C471ED, transparent 70%), radial-gradient(at 80% 80%, #FDCBF1, transparent 70%), #FFFFFF;

Common uses

• Modern hero and landing page backgrounds
• App and dashboard backdrop art
• Card or thumbnail placeholder art
• Colorful, organic overlays that don't follow a straight line or shape

Browser compatibility

A mesh gradient is only as compatible as radial-gradient() and multi-layer backgrounds, both long-standing CSS features. There's no separate syntax of its own to support.

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Chrome Android
10+	12+	36+	26+	15.4+	12.1+	15.4+	x	4.4+	151+

You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.


FAQ

How is a mesh gradient different from a normal CSS gradient?

There's no dedicated mesh-gradient() function in CSS. It's several radial-gradient() layers, each positioned independently, stacked together in one background declaration, so every color gets its own spot instead of following a single line or shape.

How many colors can a mesh gradient have?

As many as you add layers for. Each color is its own comma-separated radial-gradient() with a position and a transparent fade, ending in one flat background-color as the final layer.

Generate your own mesh gradient →