What are SVG waves for?

Waves make attractive dividers between page sections and decorative headers or footers. Because they're SVG they stay crisp at any width.

Can I stack multiple layers?

Yes — add up to five layers with graduated opacity for a sense of depth.

Is anything uploaded?

No. Waves are generated in your browser and never leave your device.

SVG Wave Generator

Generate smooth, layered SVG wave dividers with adjustable layers, amplitude and colour. Copy or download the SVG — all in your browser.

Layers3Amplitude80pxColour

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none" role="img" aria-label="Wave shape">
  <path fill="#6366f1" fill-opacity="0.4" d="M 0 144 Q 180 86.6 360 144 Q 540 197.5 720 144 Q 900 67.1 1080 144 Q 1260 219.6 1440 144 L 1440 320 L 0 320 Z"/>
  <path fill="#6366f1" fill-opacity="0.5" d="M 0 182.4 Q 180 116.6 360 182.4 Q 540 256.1 720 182.4 Q 900 106.8 1080 182.4 Q 1260 238 1440 182.4 L 1440 320 L 0 320 Z"/>
  <path fill="#6366f1" fill-opacity="0.7" d="M 0 220.8 Q 180 160.1 360 220.8 Q 540 274.3 720 220.8 Q 900 153.1 1080 220.8 Q 1260 282.6 1440 220.8 L 1440 320 L 0 320 Z"/>
</svg>

About this tool

Generate layered SVG wave dividers with adjustable layers, amplitude and colour. Because they're SVG, waves stay crisp at any width.

Common use cases

Divide page sections with a smooth wave
Add depth to a header or footer with layered waves
Export an SVG wave for any framework