CSS Wave Divider Generator

You need a smooth wave that separates your hero from the features section. Writing SVG path data by hand — calculating sinusoidal coordinates, choosing control points for Bézier curves, getting the amplitude and frequency just right — is tedious and error-prone. This tool generates wave dividers visually: pick a shape, adjust amplitude and frequency, set your color, and copy the SVG and CSS instantly.

Why SVG Waves for Section Dividers

CSS can produce simple angled or curved section separators with clip-path or border-radius tricks, but smooth multi-period waves require SVG paths. An inline SVG wave scales perfectly at any viewport width without pixelation or performance cost — and because the fill color is set directly in the fill attribute, the wave seamlessly connects the background color of the section above to the background of the section below.

Wave dividers are used across modern landing pages, SaaS marketing sites, and portfolio pages to:

• Create visual rhythm between sections
• Soften hard edges between color zones
• Add depth and layering without images
• Guide eye movement down the page

Wave Types Explained

Sine Wave

The classic smooth wave produced by the mathematical sine function. The path is sampled at many points along y = A·sin(2πfx/W) where A is amplitude, f is frequency, and W is total width. Use preserveAspectRatio="none" to stretch the fixed-viewBox SVG to any container width without distortion.

<!-- Sine wave divider example -->
<div class="wave-divider">
  <svg xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M 0 120 L 0 60 ..." fill="#3B82F6"/>
  </svg>
</div>

Triangle Wave

A sharp zigzag pattern made of alternating peaks and valleys. Unlike sine, the transitions are linear — useful for a more geometric, angular aesthetic.

Sawtooth Wave

Rises steeply, drops instantly, repeats. Produces an asymmetric, edgy look suited for bold design systems.

Steps Wave

Horizontal plateaus connected by vertical drops — a staircase pattern. Works well for layered, structured layouts.

Custom Bezier

Smooth S-curves using cubic Bézier control points. More exaggerated than sine at the same amplitude, giving a stronger wave impression.

How to Use the Generated SVG

Basic Usage

<section style="background: #ffffff;">
  <p>Content above the wave</p>
</section>

<!-- Wave divider -->
<div class="wave-divider">
  <svg xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M 0 120 L 0 60.0 L 60.0 ..." fill="#3B82F6"/>
  </svg>
</div>

<section style="background: #3B82F6;">
  <p>Content below the wave (same color as wave fill)</p>
</section>

.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 120px;
}

Key Technique: Color Matching

The wave SVG fill color must match the background color of the section below it (or above it if flipped). If your lower section has background: #3B82F6, set the wave fill to #3B82F6. This makes the wave appear to organically connect the two sections.

Flip for Reversed Direction

Toggle “Flip Vertical” to reverse the wave — useful when the wave should dip into the section above rather than rising from it. The flip applies a CSS transform: scale(1, -1) on the SVG path.

Responsive Behavior

The preserveAspectRatio="none" attribute is critical for responsive waves. Without it, the SVG would maintain its aspect ratio and leave gaps on wide screens. With it, the SVG stretches horizontally to fill any container while maintaining the fixed height.

/* Make the wave scale with the viewport */
.wave-divider svg {
  display: block;
  width: 100%;
  height: clamp(60px, 10vw, 200px); /* Responsive height */
}

Tailwind CSS Integration

<!-- Tailwind: wave container -->
<div class="relative w-full overflow-hidden leading-[0]">
  <svg class="block w-full h-[120px]"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1200 120"
       preserveAspectRatio="none">
    <path d="..." fill="#3B82F6"/>
  </svg>
</div>

Layering Multiple Waves

You can overlay two waves with slight offsets to create a layered effect:

<div class="wave-divider" style="position: relative; height: 150px;">
  <!-- Back wave (lighter, slightly offset) -->
  <svg style="position: absolute; bottom: 0; opacity: 0.4;"
       viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="..." fill="#3B82F6"/>
  </svg>
  <!-- Front wave -->
  <svg style="position: absolute; bottom: 0;"
       viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="..." fill="#2563EB"/>
  </svg>
</div>

Animating Wave Dividers

/* Scrolling wave animation */
.wave-divider svg {
  animation: wave-scroll 8s linear infinite;
}

@keyframes wave-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

For the animation to loop seamlessly, use a viewBox twice as wide (viewBox="0 0 2400 120") and repeat the wave pattern twice inside it.

Performance Considerations

SVG waves inline in the HTML render immediately without an HTTP request. For waves used on multiple pages, consider:

1. Inline SVG — fastest for single use, no extra request
2. External SVG via <img> — cacheable, but fill must be set in SVG file
3. CSS mask-image with data URI — flexible fill from CSS, slightly more complex setup
4. background-image: url() — simplest to use, but can’t change color via CSS

For landing pages and single-section dividers, inline SVG (what this tool generates) is the recommended approach.

Frequently Asked Questions

How do I make a wave that fills the full width of the screen? Set the container to width: 100% and the SVG to width: 100%. The preserveAspectRatio="none" attribute in the SVG ensures it stretches to fill any width. No JavaScript needed.

Why does my wave show a gap between the SVG and the section below? This is usually caused by the browser adding a small whitespace below inline SVG (because SVG is treated as inline element). Add display: block to the SVG, or set line-height: 0 on the container.

Can I animate the wave? Yes. The simplest approach is to animate translateX on a wave that’s twice the viewBox width. More complex animations can use CSS @keyframes on the SVG path’s d attribute, but browser support for path morphing without JavaScript is limited.

Can I use multiple waves on the same page? Yes, each wave is an independent SVG element. Use different amplitudes, frequencies, or colors for variety while keeping a consistent visual language.

Does the wave work in all browsers? SVG and preserveAspectRatio are supported in all modern browsers. The wave will render correctly in Chrome, Firefox, Safari, and Edge.

Is my design data sent to a server? No. All wave generation happens in your browser using JavaScript. No SVG, color, or configuration data is transmitted to any server.