SVG Wave Generator
Create layered wave shapes for section dividers. Customize layers, complexity, colors, and direction.
SVG Wave Generator
Generate SVG wave section dividers with custom colors, layers, and complexity. Copy SVG or download. Free online tool.
3
4
120px
SVG Code
<svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#8b5cf6" />
</linearGradient>
</defs>
<path d="M 0 400 L 0 150.92763586509423 Q 200 182.52427973229203 300 209.73646798820718 Q 400 236.94865624412233 500 200.188830287224 Q 600 163.42900433032565 700 197.253436413529 Q 800 231.07786849673232 900 241.67049024202652 Q 1000 252.2631119873207 1100 207.3128989932442 L 1200 162.3626859991677 L 1200 400 Z" fill="url(#waveGrad)" opacity="0.30" />
<path d="M 0 400 L 0 298.94300120177286 Q 200 206.0652162529871 300 221.92598316858437 Q 400 237.78675008418162 500 219.58741056806667 Q 600 201.38807105195175 700 207.47448648371255 Q 800 213.56090191547335 900 223.79176168661127 Q 1000 234.0226214577492 1100 221.07414318615798 L 1200 208.12566491456678 L 1200 400 Z" fill="url(#waveGrad)" opacity="0.53" />
<path d="M 0 400 L 0 299.6623309421784 Q 200 295.8284925312346 300 274.88961809711054 Q 400 253.95074366298647 500 253.56068199993098 Q 600 253.17062033687552 700 246.29649270312265 Q 800 239.4223650693698 900 266.5384512844319 Q 1000 293.65453749949404 1100 273.5177349063108 L 1200 253.38093231312754 L 1200 400 Z" fill="url(#waveGrad)" opacity="0.77" />
</svg>Frequently Asked Questions
What are SVG waves used for?+
SVG waves are commonly used as section dividers on websites — the curved shape between two content sections. They add visual interest and a modern feel to web pages.
Can I use these waves in my projects?+
Yes. The generated SVG code is free to use in any project. Copy the SVG and paste it into your HTML, or download the file.