SVG Wave Generator

Create beautiful wave dividers for your website sections. Perfect for modern, flowing designs!

Section Above

Section Below

Wave Layers: 3

Height: 150px

Complexity: 5

Opacity: 100%

Color

Flip (for top divider)

Presets

SVG Code

CSS Code

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

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
}

Features

Multiple wave layers
Adjustable complexity
Flip for top/bottom
Customizable colors
Copy SVG & CSS code

How to Use

1
Adjust wave count and height
2
Set your preferred color
3
Toggle flip for different positions
4
Copy SVG and CSS code
5
Paste into your project

Frequently Asked Questions

How do I use this?

Place the SVG in a container with position:relative and the wave with position:absolute at top or bottom.

Can I change the width?

The SVG uses viewBox so it scales to any width automatically.

Back to Design Tools