Build an Animated Mesh-Like Background in CSS

Use overlapping radial gradients for a mesh-like effect

You can create an animated mesh-like background in CSS by layering several radial gradients and shifting their positions. Each gradient provides a soft color region that fades into transparency, allowing the layers beneath it to remain visible. The overlap resembles a flowing color field without requiring a downloaded image or a canvas.

This is an approximation, not a true editable gradient mesh with Bézier control points. If your design requires an exact mesh from an illustration application, export that artwork or use a rendering system that supports its geometry. The CSS approach is useful when the visual goal is a soft, responsive backdrop rather than pixel-identical reproduction of a specific vector asset.

Create three layers and a short introductory motion

The example below has three radial layers over a pale base. Each colored center fades to a transparent version of that same color. A four-second introductory animation shifts the layers once and then stops. Keeping it finite makes the page settle into a quiet state after the entrance effect instead of running a perpetual distraction.

<section class="mesh-panel">
  <div class="mesh-copy">
    <h2>A soft color field</h2>
    <p>The text has its own solid surface.</p>
  </div>
</section>

.mesh-panel {
  box-sizing: border-box;
  max-width: 48rem;
  margin: 1rem auto;
  padding: clamp(1rem, 5vw, 3rem);
  background-color: #e0e7ff;
  background-image:
    radial-gradient(ellipse, #f9a8d4 0%, rgb(249 168 212 / 0) 65%),
    radial-gradient(ellipse, #a5b4fc 0%, rgb(165 180 252 / 0) 65%),
    radial-gradient(ellipse, #67e8f9 0%, rgb(103 232 249 / 0) 65%);
  background-size: 140% 160%, 150% 140%, 160% 150%;
  background-position: 0% 0%, 100% 100%, 50% 0%;
  background-repeat: no-repeat;
  animation: mesh-arrive 4s ease-in-out 1 forwards;
}
.mesh-copy {
  padding: 1.25rem;
  color: #172554;
  background: #ffffff;
  border-radius: .75rem;
}
@keyframes mesh-arrive {
  to { background-position: 100% 50%, 0% 20%, 60% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-panel { animation: none; }
}

The white .mesh-copy panel deliberately separates reading from decoration. Its text does not depend on whichever color happens to pass underneath. The radial layers extend beyond the container’s size, which gives percentage positions visible room to move. Matching three entries in the size and position lists also makes each layer’s behavior explicit.

Understand which color sits on top

The first background image in the comma-separated list is painted above the following images. Here the pink layer can cover the indigo and cyan centers, but its transparent outer area reveals them. Reordering the functions changes the composition even if every individual color and position stays the same.

Debug the arrangement by temporarily retaining only one radial-gradient line and its corresponding size and position. Check where that colored region appears, then add the second and third layers back. This is easier than randomly changing every percentage when a corner looks too dark or a color seems to have disappeared.

Use the generator for a starting color pair

The CSS Gradient Generator can preview a simple two-color radial background. Choose Radial and two colors to explore a starting palette. Its angle control is hidden in radial mode because this tool emits a centered circular gradient rather than an angled linear one.

The tool does not generate this three-layer mesh approximation, transparent stops, elliptical sizing or animation. Those features are authored in the example stylesheet. Treat its output as a palette study, then inspect the complete layered result in your page. A static two-color preview cannot predict all the overlaps in a multi-layer composition.

Verify the entrance and the settled state

At the start, the background-position list should match the first declaration. At four seconds it should match the keyframe’s final positions and remain there because animation-fill-mode is forwards. Reload to replay the entrance. Changing the browser’s reduced-motion preference should give a static initial composition instead, without changing text or panel dimensions.

Check both wide and narrow layouts because an ellipse’s shape and overlapping area depend on the box’s proportions. The same percentages can look pleasantly spread across a desktop banner and crowded behind a phone card. Adjust the layer sizes for a narrow breakpoint if that composition needs a different balance.

Large animated backgrounds can require repainting, so measure scrolling and rendering in the actual page before duplicating this effect across many sections. The radial-gradient reference documents the shape and stop syntax. Use those primitives intentionally: this recipe creates decorative moving color regions and does not claim to implement a vector mesh editor.

Related guides

Use Radial Gradients in CSS: Shape, Center, and Size

Create a CSS radial gradient with an explicit shape and center, compare closest-side and farthest-corner sizing, and test the result in changing boxes.

Use CSS Gradients as Reusable Background Values

Add gradient color in CSS with image-valued custom properties, reuse a palette across components, and keep text colors separate from background gradients.

Add a Gradient to an Existing CSS Component

Add a gradient to a component without losing background sizing or fallback colors. Locate the winning rule, check state overrides, and test narrow layouts.