Can I add multiple wave layers?

Yes, each layer has its own amplitude, frequency, phase, color, and opacity.

Can I flip the wave vertically?

Yes, use the Flip vertically switch.

Can I download the SVG file?

Yes, use the Download button to save a .svg file.

SVG Wave Generator

Generate parametric SVG wave shapes for sections.

Works Offline

Privacy First

No Login

No API

Controls

Height (200px)

Flip vertically

Layer 1

Amplitude (20)

Frequency (1.5)

Phase (0°)

Opacity (0.70)

Color

Layer 2

Amplitude (30)

Frequency (1)

Phase (90°)

Opacity (1.00)

Color

Preview

SVG markup

<svg viewBox="0 0 1200 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M0.0,100.0 L12.0,101.9 L24.0,103.7 L36.0,105.6 L48.0,107.4 L60.0,109.1 L72.0,110.7 L84.0,112.3 L96.0,113.7 L108.0,115.0 L120.0,116.2 L132.0,117.2 L144.0,118.1 L156.0,118.8 L168.0,119.4 L180.0,119.8 L192.0,120.0 L204.0,120.0 L216.0,119.8 L228.0,119.5 L240.0,119.0 L252.0,118.4 L264.0,117.5 L276.0,116.5 L288.0,115.4 L300.0,114.1 L312.0,112.7 L324.0,111.2 L336.0,109.6 L348.0,107.9 L360.0,106.2 L372.0,104.4 L384.0,102.5 L396.0,100.6 L408.0,98.7 L420.0,96.9 L432.0,95.0 L444.0,93.2 L456.0,91.5 L468.0,89.8 L480.0,88.2 L492.0,86.8 L504.0,85.4 L516.0,84.2 L528.0,83.1 L540.0,82.2 L552.0,81.4 L564.0,80.8 L576.0,80.4 L588.0,80.1 L600.0,80.0 L612.0,80.1 L624.0,80.4 L636.0,80.8 L648.0,81.4 L660.0,82.2 L672.0,83.1 L684.0,84.2 L696.0,85.4 L708.0,86.8 L720.0,88.2 L732.0,89.8 L744.0,91.5 L756.0,93.2 L768.0,95.0 L780.0,96.9 L792.0,98.7 L804.0,100.6 L816.0,102.5 L828.0,104.4 L840.0,106.2 L852.0,107.9 L864.0,109.6 L876.0,111.2 L888.0,112.7 L900.0,114.1 L912.0,115.4 L924.0,116.5 L936.0,117.5 L948.0,118.4 L960.0,119.0 L972.0,119.5 L984.0,119.8 L996.0,120.0 L1008.0,120.0 L1020.0,119.8 L1032.0,119.4 L1044.0,118.8 L1056.0,118.1 L1068.0,117.2 L1080.0,116.2 L1092.0,115.0 L1104.0,113.7 L1116.0,112.3 L1128.0,110.7 L1140.0,109.1 L1152.0,107.4 L1164.0,105.6 L1176.0,103.7 L1188.0,101.9 L1200.0,100.0 L1200,200 L0,200 Z" fill="#6366f1" fill-opacity="0.7" />
  <path d="M0.0,130.0 L12.0,129.9 L24.0,129.8 L36.0,129.5 L48.0,129.1 L60.0,128.5 L72.0,127.9 L84.0,127.1 L96.0,126.3 L108.0,125.3 L120.0,124.3 L132.0,123.1 L144.0,121.9 L156.0,120.5 L168.0,119.1 L180.0,117.6 L192.0,116.1 L204.0,114.5 L216.0,112.8 L228.0,111.0 L240.0,109.3 L252.0,107.5 L264.0,105.6 L276.0,103.8 L288.0,101.9 L300.0,100.0 L312.0,98.1 L324.0,96.2 L336.0,94.4 L348.0,92.5 L360.0,90.7 L372.0,89.0 L384.0,87.2 L396.0,85.5 L408.0,83.9 L420.0,82.4 L432.0,80.9 L444.0,79.5 L456.0,78.1 L468.0,76.9 L480.0,75.7 L492.0,74.7 L504.0,73.7 L516.0,72.9 L528.0,72.1 L540.0,71.5 L552.0,70.9 L564.0,70.5 L576.0,70.2 L588.0,70.1 L600.0,70.0 L612.0,70.1 L624.0,70.2 L636.0,70.5 L648.0,70.9 L660.0,71.5 L672.0,72.1 L684.0,72.9 L696.0,73.7 L708.0,74.7 L720.0,75.7 L732.0,76.9 L744.0,78.1 L756.0,79.5 L768.0,80.9 L780.0,82.4 L792.0,83.9 L804.0,85.5 L816.0,87.2 L828.0,89.0 L840.0,90.7 L852.0,92.5 L864.0,94.4 L876.0,96.2 L888.0,98.1 L900.0,100.0 L912.0,101.9 L924.0,103.8 L936.0,105.6 L948.0,107.5 L960.0,109.3 L972.0,111.0 L984.0,112.8 L996.0,114.5 L1008.0,116.1 L1020.0,117.6 L1032.0,119.1 L1044.0,120.5 L1056.0,121.9 L1068.0,123.1 L1080.0,124.3 L1092.0,125.3 L1104.0,126.3 L1116.0,127.1 L1128.0,127.9 L1140.0,128.5 L1152.0,129.1 L1164.0,129.5 L1176.0,129.8 L1188.0,129.9 L1200.0,130.0 L1200,200 L0,200 Z" fill="#22d3ee" fill-opacity="1" />
</svg>

About the SVG Wave Generator

Create smooth SVG wave dividers with adjustable amplitude, frequency, phase, height, and layered colors. Preview live and download the SVG markup for use as a section background or divider.

Examples

Two-layer wave

amplitude 20/30

Output

<svg viewBox="0 0 1200 200">...</svg>

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser