The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="wave-section">
  <div class="content">
    <h1>Layered Waves</h1>
    <p>One SVG path, three speeds.</p>
  </div>
  <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" aria-hidden="true">
    <defs>
      <path id="wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352z" />
    </defs>
    <g class="wave-layers">
      <use href="#wave" x="48" y="0" fill="rgba(37, 6, 173, 0.25)" />
      <use href="#wave" x="48" y="3" fill="rgba(37, 6, 173, 0.45)" />
      <use href="#wave" x="48" y="6" fill="#2506ad" />
    </g>
  </svg>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create an animated layered-wave background using inline SVG and CSS only.

Requirements:
- A full-viewport section with a subtle white-to-#eef2ff vertical gradient.
- An inline SVG pinned to the bottom (position absolute, width 100%, height about 22vh) with viewBox "0 24 150 28" and preserveAspectRatio="none".
- Define one wave path in <defs> and reuse it three times with <use>, each a little lower (y = 0, 3, 6) and more opaque, filled with indigo #2506ad at 25%, 45% and 100% opacity.
- Animate each <use> horizontally with a translate3d keyframe from -90px to 85px, infinite, with different durations (9s, 14s, 22s) and negative delays so the layers move at different speeds (parallax).
- Disable the animation under prefers-reduced-motion.
- Centre a navy heading and grey subtitle above the waves.

Return a single HTML file with a <style> block.

How to build it, step by step

1. 1

   Define a single repeating wave shape as an SVG path inside defs. The path is wider than the viewBox so there is always wave to slide into view.

2. 2

   Reuse the path three times with the use element, offsetting each one slightly lower and giving it a more opaque fill.

3. 3

   Set preserveAspectRatio to none so the waves stretch to any screen width.

4. 4

   Animate each layer with the same horizontal keyframes but a different duration. The front layer moves slowest, which reads as depth.

5. 5

   Pin the SVG to the bottom of the section with position: absolute.

Customisation tips

• Flip the waves to the top of a section with transform: rotate(180deg) on the SVG.
• Match the solid front wave colour to the next section's background for a seamless transition.
• Increase the SVG height to 35vh for bigger, more dramatic waves.

More backgrounds