Make an SVG wave divider

Layered smooth waves as copy-pasteable SVG — tune amplitude, frequency, layers, and colors for section dividers and hero backgrounds.

Tools used in this guide

SVG wave generator

The job

Wavy section dividers are a staple of landing pages. Drawing them in an editor takes a minute; parametric waves take seconds and stay perfectly smooth at any width.

Tune the parameters

Set canvas width and height, wave amplitude and count, and the number of layered curves. Each layer gets the same base color with stepped opacity. Generate renders the preview; Reroll draws a new seed. Copy or download the markup.

A seed value makes the curve deterministic — same seed, same wave.
Width is capped at 4096 px and height at 2048 px; amplitude is a fraction of the height.

Worked example

Width 1440, height 120, 2 waves, 3 layers at seed 7 produces a subtle triple-curve footer divider that downloads as a 3 KB SVG.

Where it stops

It generates static SVG only — no PNG export, no animation, no interaction. Waves use smooth sine-like curves, not noise. The output is markup you paste into a page; there is no hosting or CDN link.