Image Tools

SVG Wave Generator

Create smooth wave shapes for section dividers. Adjust height, complexity, and color, flip it, and copy the ready-to-use SVG.

SVG code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 150" width="1440" height="150" preserveAspectRatio="none"><path d="M 0,75.0 C 120.0,27.0 240.0,27.0 360.0,75.0 C 480.0,123.0 600.0,123.0 720.0,75.0 C 840.0,27.0 960.0,27.0 1080.0,75.0 C 1200.0,123.0 1320.0,123.0 1440.0,75.0 L 1440,150 L 0,150 Z" fill="#6366f1"/></svg>
HTML / CSS usage example
<div class="wave-divider">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 150" width="1440" height="150" preserveAspectRatio="none"><path d="M 0,75.0 C 120.0,27.0 240.0,27.0 360.0,75.0 C 480.0,123.0 600.0,123.0 720.0,75.0 C 840.0,27.0 960.0,27.0 1080.0,75.0 C 1200.0,123.0 1320.0,123.0 1440.0,75.0 L 1440,150 L 0,150 Z" fill="#6366f1"/></svg>
</div>

<style>
  .wave-divider svg {
    display: block;
    width: 100%;
    height: auto;
  }
</style>

How wave dividers work

A wave divider is a single SVG path filled with one color, sized to stretch across the full width of a section. Place it between two sections to replace a hard straight edge with a soft curve.

Frequently asked questions

How do I use the wave on my site?

Copy the SVG and place it at the top or bottom of a section. The wave stretches to the full width of its container, creating a soft transition between sections.

Can I change the wave color later?

Yes. The color is set in the fill of the path. Edit that value, or set fill to currentColor and control it from CSS.

What does complexity change?

Complexity controls how many wave crests appear across the width. Lower values give a calm single curve, higher values give a busier ripple.

Is it free for commercial use?

Yes. The generated SVG is your own markup with no attribution required.

Related SVG tools