Mesh gradients: what they are and how to make one

A mesh gradient is a gradient built from several points of colour spread across a surface, each blending into its neighbours in every direction at once. A linear gradient moves along one line and a radial gradient spreads from one centre; a mesh has no single path, so colour pools, drifts and overlaps like light through water. That is why mesh gradients feel organic, and why they have become the default look for hero sections, wallpapers and album art.

This guide explains how a mesh works, how to make one in CSS and in design tools, and how to avoid the grey patches and stripes that make so many of them look cheap. For the other shapes, see types of gradients.

What makes a gradient a mesh

In a true gradient mesh, such as the one in Adobe Illustrator, the surface is divided into a grid. Each point on the grid holds a colour, and the software blends smoothly between neighbouring points, bending the grid to steer the colour. Freeform gradients drop the grid and let you place colour points anywhere. Web and social mesh gradients usually take a third route: soft blobs of colour laid over a base and blended together.

All three share one idea. Every pixel's colour is a mix of the nearby colour points, weighted by how close they are. Move one point and only its neighbourhood changes, which is what lets a mesh feel hand-made rather than calculated.

Why mesh gradients feel organic

That wandering quality is also the danger. With no structure, a mesh can look like a random blur. Good ones have a composition: a bright area where the eye lands first, a darker area that gives it weight, and a calm area where words can sit.

How to make a mesh gradient in CSS

1. 1

   Set a base colour

   Choose a dark or light ground. It shows through wherever the colour pools fade out, so it decides the overall mood.

2. 2

   Place three to five colour pools

   Each pool is a radial-gradient centred at a position with at x% y%, fading to transparent. Put them near corners and edges rather than in the middle.

3. 3

   Let them overlap

   Fade each pool out between 45% and 60% of the way so neighbours meet. Overlaps are where the mesh gets its richness.

4. 4

   Leave a calm zone

   Keep one area mostly base colour, usually where your headline will go. See text on a gradient.

5. 5

   Add grain

   A light noise layer hides stripes and adds depth. Grainy gradients shows the code.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}

Because the pools are percentages, the mesh rescales with its box. On very different shapes, such as a tall story and a wide banner, adjust the at positions so the bright area still lands where you want it. The same palette can be animated slowly by moving those positions; animated gradient backgrounds covers how to do that without hurting performance.

Making a mesh gradient in design tools

In tools with a real mesh or freeform gradient, place your colour points directly and drag them until the composition works. In tools without one, the blur method works everywhere: draw three to five soft shapes in your colours on a base rectangle, blur them heavily, often by a quarter of the canvas width or more, and let them overlap. Then add a grain layer on top and export at the final size rather than scaling up.

Mesh gradient mistakes and how to fix them

A mesh is only as good as its palette. If you are unsure which colours will blend cleanly, start with an analogous colour family and add one contrasting accent at a single pool.

GR·FVZ6·KW

Thin Dune

See this Mark

If you would rather describe a mesh than build one, the Forge makes new Marks from a sentence or control by control, with up to eight colours and three stacked materials.