SVG Wave Generator

Create beautiful wave dividers for your website sections

Presets

Controls

Wave Color

Background Color

Wave Style

Layers2

Amplitude80px

Complexity4

SVG Height200px

Flip Vertically

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none">
  <path d="M0,98.65470851646243 C144,98.65470851646243 216,54.35436213794571 360,54.35436213794571 C504,54.35436213794571 576,73.76551401220776 720,73.76551401220776 C864,73.76551401220776 936,76.99491281713817 1080,76.99491281713817 C1224,76.99491281713817 1296,109.6862814945041 1440,109.6862814945041 L1440,200 L0,200 Z" fill="#3b82f6" opacity="0.3" />
  <path d="M0,98.75836743857559 C144,98.75836743857559 216,51.046046038201126 360,51.046046038201126 C504,51.046046038201126 576,150.8968515329965 720,150.8968515329965 C864,150.8968515329965 936,103.38402106741817 1080,103.38402106741817 C1224,103.38402106741817 1296,91.88178463082927 1440,91.88178463082927 L1440,200 L0,200 Z" fill="#3b82f6" opacity="1" />
</svg>

CSS Usage

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

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

/* Usage: wrap a section with position: relative,
   then place a .wave-divider div inside it. */