CSS Mesh Gradient: Layer Radial Gradients for Backgrounds

A mesh-style background can be built from several soft radial gradients over a solid colour. It is not a true editable mesh with control points and interpolated patches, but the layered approximation is often enough for a product hero, empty state or decorative panel. The craft lies in controlling overlap rather than adding endless colour blobs.

Plan the colour field before writing layers

Use the gradient generator to explore a small family of colours and a general direction of movement. Begin with two or three related hues plus a base. The goal is a balanced colour field, not a display of every attractive stop available in the tool.

Sketch where the content will sit. If a heading occupies the left half of a hero, place the strongest colour activity toward the right or outer edges. A mesh should support the composition. It should not create a bright spot directly behind a word simply because that spot looked good in an empty preview.

Choose a base colour that can stand on its own. It will show through transparent regions, act as a fallback and influence every translucent overlap. A dark navy base produces a different result from white even when the radial layers use identical hue values.

For more general palette exploration, consult the colour category. Keep this particular exercise narrow: a static background, a few controlled radial shapes and an explicit foreground zone. Animation and complex blend effects can wait until the basic colour composition succeeds.

Understand the background stack

CSS paints the first background image closest to the viewer. Each subsequent image sits behind it, and the background colour sits beneath all images. This layer order matters because a mostly opaque first gradient can obscure carefully tuned layers below it.

Each radial gradient defines a shape, size, position and list of stops. An ellipse lets the colour spread differently across horizontal and vertical axes. Percentage positions can push a centre toward an edge or even outside the element, creating a wash instead of a conspicuous circular spot.

Read MDN's radial-gradient reference when adjusting sizing keywords and explicit radii. A stop percentage describes a position along that gradient's ray; it is not simply a percentage of the element's width. Changing the ellipse geometry changes how a given stop appears.

Start with one layer and add the next only when its purpose is clear. A large blue wash may establish the overall atmosphere, a smaller violet field may add depth, and a restrained warm highlight may create contrast. If two layers perform the same job, simplify before tuning them further.

Build a controlled three-layer example

This example leaves the left side relatively quiet while placing brighter colour toward the right. The final solid colour is supplied separately so it remains visible through the transparent parts of the gradient stack.

.mesh-panel {
background-color: #111a35;
background-image:
  radial-gradient(
    ellipse 55% 75% at 88% 18%,
    rgb(169 110 245 / 0.65) 0%,
    rgb(169 110 245 / 0) 72%
  ),
  radial-gradient(
    ellipse 65% 90% at 75% 95%,
    rgb(34 185 201 / 0.5) 0%,
    rgb(34 185 201 / 0) 75%
  ),
  radial-gradient(
    ellipse 80% 100% at 15% 55%,
    rgb(37 65 130 / 0.6) 0%,
    rgb(37 65 130 / 0) 80%
  );
color: #ffffff;
}

Use transparent colour stops to let neighbouring layers contribute gradually. Keeping the hue channels consistent while fading alpha makes the intended endpoint clear. Modern gradient interpolation handles transparency using premultiplied alpha, but explicit same-colour transparent stops remain easy to understand and edit.

Avoid assuming that white text is safe merely because the base is dark. The violet and cyan layers brighten some areas significantly. The code demonstrates composition, not a guaranteed text-contrast result for every position and content length.

For the painting model behind multiple layers, see MDN's multiple background guide. It also clarifies why related background properties must be managed carefully when individual layers need different sizes or repeat behaviour.

Tune overlap, transitions and colour balance

When the result looks muddy, reduce overlap before increasing saturation. Several translucent hues painted together can produce a dull intermediate field, especially when distant hues collide. Move centres apart, reduce alpha or remove a layer to restore a clearer structure.

When the result looks like separate spotlights, widen the ellipses and extend the fades. A soft transition usually needs room between its strongest colour and fully transparent edge. Narrow fades can look like blobs pasted on a flat surface rather than a connected field.

Evaluate the background in greyscale as a diagnostic. This reveals whether one bright region dominates the composition independently of hue. Then return to colour and check whether the accent has an intentional role. Greyscale is useful for hierarchy, but it does not replace actual contrast measurements.

Banding can become visible in broad, subtle transitions, depending on the display and rendering pipeline. First simplify the gradient and inspect it on several screens. Do not reflexively add a large noise image or expensive blur just to hide a problem visible only in an exaggerated screenshot.

Protect content across responsive sizes

A gradient composed for a wide hero can move behind text when the container narrows or grows taller. Test long headings, translated content and stacked mobile layouts. Responsive composition may require changing gradient centres or removing the warmest highlight at smaller widths.

Use the contrast checker with sampled background colours from the areas behind text. A single sample from the darkest corner proves little. Where the field varies too much, add a stable text panel or a restrained solid overlay instead of trying to optimise every colourful region.

The W3C contrast guidance applies to the actual foreground and background relationship. A decorative mesh is not a reason to accept unreadable copy. Keep essential information in real content rather than encoding meaning in the gradient itself.

Finally, inspect scrolling and resizing on representative devices. A few static CSS gradients may be entirely reasonable, but large painted areas and extra effects are not free. Keep the number of layers justified, avoid unnecessary animation and preserve the plain base colour as a graceful fallback.

Key takeaways

• Build mesh-style backgrounds from a small, intentional set of radial layers.
• Remember that the first listed gradient paints on top.
• Tune geometry and overlap before adding more saturation or effects.
• Reserve a predictable area for readable foreground content.
• Recheck composition and contrast when the container changes shape.