Gradient Wave Background

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

  <div class="wave wave-one"></div>
  <div class="wave wave-two"></div>
  <div class="wave wave-three"></div>

  <div class="gradient-wave-content">
    <span>Gradient Waves</span>
    <h2>Smooth Layers with Flowing Motion</h2>
    <p>Animated CSS waves with modern gradients.</p>
  </div>

</div>

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

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

  overflow:hidden;

  background:#050914;
}

.wave{
  position:absolute;

  width:150%;
  height:220px;

  left:-25%;

  border-radius:50%;

  opacity:.55;

  filter:blur(10px);

  animation:waveMove 8s ease-in-out infinite alternate;
}

.wave-one{
  bottom:-110px;

  background:
    linear-gradient(
      90deg,
      #22d3ee,
      #2563eb
    );
}

.wave-two{
  bottom:-145px;

  background:
    linear-gradient(
      90deg,
      #8b5cf6,
      #d946ef
    );

  animation-delay:-3s;
}

.wave-three{
  bottom:-175px;

  background:
    linear-gradient(
      90deg,
      #0ea5e9,
      #7c3aed
    );

  animation-delay:-5s;
}

.gradient-wave-content{
  position:relative;
  z-index:2;

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

  text-align:center;
}

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

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

.gradient-wave-content h2{
  margin:0 0 12px;

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

.gradient-wave-content p{
  margin:0;

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

@keyframes waveMove{

  0%{
    transform:translateX(-30px) rotate(-3deg);
  }

  50%{
    transform:translateX(20px) rotate(2deg);
  }

  100%{
    transform:translateX(40px) rotate(-1deg);
  }

}

How This Gradient Wave Background Works

The Gradient Wave Background creates a dark section with three large, overlapping gradient layers positioned along the bottom. The effect is built entirely with HTML and CSS. Its HTML contains a .gradient-wave-bg wrapper, three .wave elements, and a .gradient-wave-content block for the label, heading, and paragraph. There is no JavaScript in the published component.

The main .gradient-wave-bg container uses position: relative, which gives the absolutely positioned waves a positioning reference. It has a minimum height of 320px, a dark #050914 background, and overflow: hidden. That last property is important because each wave is considerably wider than the container and extends below its visible boundary.

All three waves share the base .wave class. Each one is 150% wide and 220px high, with left: -25%. This combination makes the waves extend beyond both sides of the section. A border-radius: 50% turns the large rectangular elements into oval shapes, while their negative bottom positions hide much of each oval. Only the upper portions remain visible, which creates the appearance of broad curved waves rising from the bottom.

The wave layers use .55 opacity and filter: blur(10px). The blur softens their boundaries so overlapping colors transition more naturally instead of looking like sharply defined oval elements.

Each wave receives its own horizontal linear-gradient(). .wave-one transitions from cyan #22d3ee to blue #2563eb and sits at bottom: -110px. .wave-two is placed lower at -145px and blends purple #8b5cf6 into magenta #d946ef. The third wave sits at -175px and uses blue #0ea5e9 transitioning into purple #7c3aed.

The different bottom positions create visual layering. Because each oval is partially hidden beneath the container, the first wave occupies more visible space while the second and third appear progressively lower. This produces depth without requiring SVG paths or complex clipping.

All three waves run the waveMove animation for eight seconds with ease-in-out, infinite repetition, and alternate direction. The keyframes combine horizontal translation with slight rotation. The waves begin at translateX(-30px) rotate(-3deg), move through translateX(20px) rotate(2deg), and finish at translateX(40px) rotate(-1deg). For more details about combining these transform functions, see the MDN CSS transform documentation.

The second and third waves use negative animation delays of -3s and -5s. This means the layers do not appear to begin their animation at exactly the same point, helping their movement feel less synchronized.

The content remains above the animated layers through position: relative and z-index: 2. It is centered with the parent’s flexbox layout and limited to 600px wide with 30px padding.

Customizing the Gradient Wave Background

The component can be adapted by changing its existing wave dimensions, positions, gradients, animation, and content styles.

• Replace the #050914 background with another base color to match a different dark theme.
• Change the cyan-to-blue, purple-to-magenta, and blue-to-purple gradient colors to create a different wave palette.
• Adjust the shared 150% width and 220px height to change the overall size and curvature of the waves.
• Modify left: -25% if the oversized wave elements need different horizontal positioning.
• Change the -110px, -145px, and -175px bottom values to expose more or less of each wave.
• Adjust .55 opacity or blur(10px) to make the wave layers sharper, softer, stronger, or more subtle.
• Change the 8s animation duration to control the speed of the movement.
• Modify the translateX() and rotate() values inside waveMove to alter how far the waves travel and tilt.

Where to Use This Gradient Wave Background

The animated lower section makes this background useful when a page needs motion while keeping the central content area relatively clear.

• Hero sections for SaaS, software, and technology websites.
• Landing-page banners with centered headings and descriptions.
• Product introduction sections with a dark visual theme.
• Developer portfolios and project presentation sections.
• Call-to-action areas where motion should stay behind the content.
• App or digital-service landing pages using cyan, blue, purple, and magenta accents.
• Section dividers where animated color near the bottom can help separate content areas.

For an alternative that concentrates its lighting near the top instead of creating waves along the bottom, the Spotlight Background is a related CodeRipple component. This wave design remains CSS-only, so its motion does not require event handlers or an animation loop.

Frequently Asked Questions

Does the Gradient Wave Background use JavaScript?

No. The published component contains no JavaScript. All three moving waves are animated with CSS keyframes.

How are the curved wave shapes created?

Each .wave is a large element with border-radius: 50%. The elements are positioned partly below the container using negative bottom values, so only their curved upper portions remain visible.

Why do the three waves move differently?

They share the same waveMove animation, but the second wave uses an animation delay of -3s and the third uses -5s. These offsets place the waves at different points in the animation cycle.

How fast does the wave animation run?

The animation duration is eight seconds. It uses ease-in-out, repeats infinitely, and runs with alternate direction, so the transform sequence reverses after each cycle.

The Gradient Wave Background uses three oversized gradient ovals, layered positioning, blur, and CSS transforms to produce flowing movement while keeping the implementation free of JavaScript and external graphics.