Design · 3 min read
Mesh Gradients: Soft, Organic Backgrounds
Mesh gradients — the blurry, multi-coloured blobs behind many modern landing pages — blend several colours across a surface in every direction, rather than along one line.
Try it yourself with the related tool.
Create a mesh gradient →Advertisement
How they are made in CSS
CSS has no native mesh gradient, so they are built by layering several radial-gradients, each placed at a different point and fading to transparent, over a base colour. Because each layer is a gradient, the result stays crisp at any size and weighs only a few hundred bytes.
Choosing colours
Three to five colours that sit near each other on the colour wheel blend smoothly. Opposite colours meet in muddy patches. Add a subtle noise texture on top to prevent visible colour banding on large screens.
Keep text readable
Busy, saturated meshes compete with text. Keep the area behind headings calmer, lower the saturation, or add a translucent panel behind content, and check contrast at the point where the text actually sits.