Mesh Gradient Background

<div class="mesh-gradient-bg">

  <div class="mesh-content">
    <span>Mesh Gradient</span>
    <h2>Blended Colors with Modern Depth</h2>
    <p>Layered radial gradients with pure CSS.</p>
  </div>

</div>

.mesh-gradient-bg{
  position:relative;
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(34,211,238,.55),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(139,92,246,.55),
      transparent 34%
    ),
    radial-gradient(
      circle at 25% 85%,
      rgba(59,130,246,.45),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(217,70,239,.45),
      transparent 35%
    ),
    #050914;
}

.mesh-gradient-bg::before{
  content:"";

  position:absolute;
  inset:-20%;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.05),
      transparent 45%
    );

  animation:meshShift 8s ease-in-out infinite alternate;

  pointer-events:none;
}

.mesh-content{
  position:relative;
  z-index:2;

  max-width:600px;
  padding:30px;

  text-align:center;
}

.mesh-content span{
  display:inline-block;
  margin-bottom:12px;

  color:#67e8f9;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.mesh-content h2{
  margin:0 0 12px;

  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.mesh-content p{
  margin:0;

  color:#c7d2e5;
  font-size:15px;
}

@keyframes meshShift{

  0%{
    transform:translate(-20px,-10px) scale(1);
  }

  50%{
    transform:translate(25px,20px) scale(1.08);
  }

  100%{
    transform:translate(-10px,30px) scale(.96);
  }

}

How This Mesh Gradient Background Works

The Mesh Gradient Background creates a colorful dark backdrop by stacking several CSS radial-gradient() layers over a solid base color. The HTML is intentionally minimal: a single .mesh-gradient-bg container holds .mesh-content, which contains the small label, heading, and supporting paragraph. There are no extra decorative HTML elements and no JavaScript.

The main visual effect comes from the background property on .mesh-gradient-bg. Four radial gradients are layered over the dark #050914 base. A cyan gradient using rgba(34,211,238,.55) starts near the upper-left at 15% 20%, while a purple rgba(139,92,246,.55) gradient is positioned near the upper-right at 85% 20%. The lower half adds blue at 25% 85% and magenta at 80% 80%.

Each color fades to transparent after roughly one-third of its gradient area. The cyan stops at 32%, purple at 34%, and the two lower gradients at 35%. Because these layers share the same background rather than occupying separate elements, their transparent areas reveal and visually combine with the gradients underneath. This produces the mesh-like distribution of color without images, SVG graphics, or JavaScript.

The container itself has a minimum height of 320px. Flexbox centers the content in both directions with align-items: center and justify-content: center, while overflow: hidden prevents the animated decorative layer from extending outside the section.

A ::before pseudo-element provides the component’s motion. It is positioned absolutely and uses inset: -20%, making it larger than the main container. Its background is another radial gradient: a subtle white rgba(255,255,255,.05) glow centered inside the layer and fading to transparent at 45%. pointer-events: none ensures this decorative pseudo-element does not interfere with content interaction.

The pseudo-element runs the meshShift animation for eight seconds using ease-in-out, infinite, and alternate. At the beginning, it is translated -20px horizontally and -10px vertically. Halfway through, it moves to 25px, 20px and scales to 1.08. At the final keyframe, it shifts to -10px, 30px and scales down to .96. The alternate direction then reverses the sequence, keeping the movement continuous without JavaScript. For more details about this behavior, see the MDN CSS animation documentation.

The content stays clearly above the animated pseudo-element through position: relative and z-index: 2. It has a maximum width of 600px, 30px of padding, and centered text. The cyan uppercase label uses a small 12px font with 1.5px letter spacing, while the white heading is 32px. The paragraph uses 15px text in the softer #c7d2e5 color.

Customizing the Mesh Gradient Background

The component’s appearance can be changed primarily through its gradient colors, positions, dimensions, and animation values.

• Replace the dark #050914 base with another background color to change the overall tone.
• Change the cyan, purple, blue, and magenta RGBA values to create a different mesh color palette.
• Adjust positions such as 15% 20%, 85% 20%, 25% 85%, and 80% 80% to redistribute the colored areas.
• Modify the 32%, 34%, and 35% transparent stops to make individual gradients tighter or more widely spread.
• Change min-height: 320px if the background needs to cover a taller or shorter section.
• Adjust the pseudo-element’s inset: -20% or its white .05 opacity to change the size and visibility of the moving highlight.
• Change the 8s meshShift duration to control how quickly the background highlight moves.
• Edit the translate() and scale() values inside @keyframes meshShift to alter the direction and amount of movement.

Where to Use This Mesh Gradient Background

The combination of a dark base, distributed color, and subtle CSS animation makes this component suitable for sections where the background should add movement without requiring interactive controls.

• Hero sections for developer, SaaS, or technology websites.
• Landing-page headers with centered headings and calls to action.
• Portfolio introductions that need a colorful dark background.
• Product feature sections where text should remain the main focus.
• Signup or newsletter sections with short centered content.
• Dark-theme banners that need more variation than a solid background.
• Presentation sections for apps, digital services, or development tools.

For a more textured variation of a similar color treatment, the Noise Gradient Background is a related CodeRipple component. The Mesh Gradient Background itself remains lightweight because its visual movement is handled entirely by a CSS pseudo-element and keyframe animation.

Frequently Asked Questions

Does the Mesh Gradient Background require JavaScript?

No. The published component contains no JavaScript. Its gradients, layout, moving highlight, and animation are created entirely with CSS.

How is the mesh effect created?

The background stacks four radial gradients at different positions over a #050914 base. Each colored gradient fades to transparent, allowing the layers to visually overlap and form the distributed mesh-style color pattern.

What part of the background is actually animated?

The four main colored gradients remain in their defined positions. The animation is applied to the .mesh-gradient-bg::before pseudo-element, which contains a subtle centered white radial glow. The meshShift keyframes translate and scale this oversized layer.

How long does the mesh animation take?

The meshShift animation has a duration of eight seconds. It uses ease-in-out, repeats infinitely, and has the alternate direction, so each completed sequence is followed by the animation running back in reverse.

The Mesh Gradient Background achieves its effect with a small HTML structure and layered CSS gradients, while a single animated pseudo-element adds gentle movement without introducing JavaScript or external assets.