How do I use a wave divider?

Drop the SVG at the top or bottom of a section. Set width:100% and it scales fluidly via preserveAspectRatio="none".

SVG Wave Generator

Create layered SVG wave dividers for section backgrounds. Tune amplitude, wavelength, and color, then copy the SVG.

By AbraCalc Editorial Team · Reviewed by AbraCalc Methodology Review · Last reviewed: 2026-06-25

Amplitude Wavelength Color Flip

SVG code

Pure browser JavaScript — generates SVG waves locally.

Embed this tool on your site

<iframe src="https://abracalc.com/app/svg-wave-generator/" width="100%" height="640" style="border:1px solid #e4e7ec;border-radius:12px" loading="lazy"></iframe>

How to use this tool

Drag the amplitude and wavelength sliders.
Pick a color and optionally flip the wave.
Copy the SVG or download it for use as a section divider.

Create layered SVG wave dividers for section backgrounds. Tune amplitude, wavelength, and color, then copy the SVG.

Frequently asked questions

How do I use a wave divider?: Drop the SVG at the top or bottom of a section. Set width:100% and it scales fluidly via preserveAspectRatio="none".

References & sources

SVG viewBox (MDN)

SVG Wave Generator

How to use this tool

Frequently asked questions

References & sources

Related tools