Surface pattern · updated 3 Sept 2026
Gradient mesh
A gradient mesh is a background built from several overlapping radial gradients, blurred or blended so the result reads as soft, organic colour with no visible edges. It is used as material behind heroes and glass panels, and it is almost always the source of a page's "atmosphere".
Think of it as
Stage lighting. Three coloured lamps aimed at a white backdrop, overlapping, so the wall glows without a single hard line anywhere.
Worked example
Our gradient generator builds these layer by layer: each radial gradient has a position, a size and two colour stops, and the mesh is the stack. Decode one and the stops are rarely the colours you see, because two overlapping stops produce a third colour that exists nowhere in the CSS.
Why it matters
Meshes are how a two-colour brand gets a rich surface without adding a third token. They are also the surface most likely to break contrast unpredictably, because the colour behind any given word depends on where the gradient stops fell, and to cost paint time when animated.
How it fails
Text placed directly on the mesh without a scrim. Banding on displays that cannot render the subtle stops. An animated mesh that runs on the main thread and stutters on mid-range phones.
What to measure open the decoder →
- Number of gradient layers and their stop colours, which the decoder lists
- Worst-case contrast of overlaid text against the lightest region
- Whether the mesh is animated and at what duration
Where you meet it
- SaaS heroes
- AI product launch pages
- Music and event sites
On this site
The gradient generator builds meshes and the Gradient hub collects sites that use them as material rather than decoration.
Showcase collections that exhibit it
Build it
Next rung
A mesh is a background with no edges. Its typographic opposite, a page with hard edges everywhere, is the black-and-white layout, and the two teach each other.