SVG Wave Generator

Design layered wave dividers for your website — tweak the sliders, then copy the SVG code.

Live Preview
〰️ Smooth📏 200px tall 2 layers

Global Settings

Gentle curves — best for most websites

Total height of the SVG section

200px
60px (thin)400px (tall)

Flat fill below the wave

0px
0 (wave only)300px (deep base)

The page/section colour behind the wave

Copy SVG Code

Paste this directly into your HTML. Use it as a section divider between a hero and the next section.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200" preserveAspectRatio="none">
  <path d="M 0 200.00 L 0 200.00 C 33.33 179.06, 66.67 158.51, 100.00 148.04 C 133.33 137.57, 166.67 137.57, 200.00 148.04 C 233.33 158.51, 266.67 179.06, 300.00 200.00 C 333.33 220.94, 366.67 241.49, 400.00 251.96 C 433.33 262.43, 466.67 262.43, 500.00 251.96 C 533.33 241.49, 566.67 220.94, 600.00 200.00 C 633.33 179.06, 666.67 158.51, 700.00 148.04 C 733.33 137.57, 766.67 137.57, 800.00 148.04 C 833.33 158.51, 866.67 179.06, 900.00 200.00 C 933.33 220.94, 966.67 241.49, 1000.00 251.96 C 1033.33 262.43, 1066.67 262.43, 1100.00 251.96 C 1133.33 241.49, 1166.67 220.94, 1200.00 200.00 L 1200.00 200.00 Z" fill="#6366f1" fill-opacity="1.00" />
  <path d="M 0 200.00 L 0 162.72 C 22.22 157.66, 44.44 160.07, 66.67 168.81 C 88.89 177.55, 111.11 192.29, 133.33 206.09 C 155.56 219.89, 177.78 232.22, 200.00 237.28 C 222.22 242.34, 244.44 239.93, 266.67 231.19 C 288.89 222.45, 311.11 207.71, 333.33 193.91 C 355.56 180.11, 377.78 167.78, 400.00 162.72 C 422.22 157.66, 444.44 160.07, 466.67 168.81 C 488.89 177.55, 511.11 192.29, 533.33 206.09 C 555.56 219.89, 577.78 232.22, 600.00 237.28 C 622.22 242.34, 644.44 239.93, 666.67 231.19 C 688.89 222.45, 711.11 207.71, 733.33 193.91 C 755.56 180.11, 777.78 167.78, 800.00 162.72 C 822.22 157.66, 844.44 160.07, 866.67 168.81 C 888.89 177.55, 911.11 192.29, 933.33 206.09 C 955.56 219.89, 977.78 232.22, 1000.00 237.28 C 1022.22 242.34, 1044.44 239.93, 1066.67 231.19 C 1088.89 222.45, 1111.11 207.71, 1133.33 193.91 C 1155.56 180.11, 1177.78 167.78, 1200.00 162.72 L 1200.00 200.00 Z" fill="#a855f7" fill-opacity="0.70" />
</svg>

Wave Layers

— stacked on top of each other
Layer 1
(how tall the peaks are)
60
(unequal peak heights)
0%
0% (uniform)100% (natural)
(number of waves across)
2×
(slide the wave left/right)
0.0
100%
Layer 2
(how tall the peaks are)
40
(unequal peak heights)
0%
0% (uniform)100% (natural)
(number of waves across)
3×
(slide the wave left/right)
1.2
70%

How to use this

1️⃣Adjust the sliders — tweak Wave Shape, Height, and per-layer controls. The preview updates live above.
2️⃣Add layers — stack 2–4 waves with different colours and opacities for a rich gradient look.
3️⃣Copy the SVG — paste it between sections in your HTML. Set width: 100% and it will fill any screen.