Share
Create layered SVG wave dividers for hero sections and footers.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 220" preserveAspectRatio="none"> <path d="M 0.0 201.3 L 180.0 214.7 L 360.0 220.0 L 540.0 214.0 L 720.0 200.2 L 900.0 186.8 L 1080.0 181.5 L 1260.0 187.5 L 1440.0 201.3 L 1440 0 L 0 0 Z" fill="#6366f1" opacity="0.40"/> <path d="M 0.0 172.1 L 144.0 187.0 L 288.0 204.0 L 432.0 216.5 L 576.0 219.8 L 720.0 212.6 L 864.0 197.6 L 1008.0 180.6 L 1152.0 168.1 L 1296.0 164.8 L 1440.0 172.1 L 1440 0 L 0 0 Z" fill="#7761f4" opacity="0.70"/> <path d="M 0.0 188.1 L 205.7 166.7 L 411.4 163.7 L 617.1 181.3 L 822.9 206.2 L 1028.6 219.8 L 1234.3 211.7 L 1440.0 188.1 L 1440 0 L 0 0 Z" fill="#8b5cf6" opacity="1.00"/> </svg>
Generate beautiful SVG wave dividers for hero sections, page transitions, and footers. Tune wavelength, amplitude, layer count, and palette. Stack multiple wave layers for parallax depth. Copy the SVG markup or download as a file.
Share this tool
