AppsFactory
Tools
Games
About
Tools
Games
About
SVG Wave Generator
Create beautiful wave dividers for your website sections
Presets
Gentle Swell
Ocean Depths
Zigzag Edge
Staircase
Layered Sunset
Minimal Dip
Controls
Wave Color
Background Color
Wave Style
smooth
sharp
steps
Layers
2
Amplitude
80px
Complexity
4
SVG Height
200px
Flip Vertically
Randomize Wave
Preview
SVG Code
Copy SVG
Download SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none"> <path d="M0,98.65470851646243 C144,98.65470851646243 216,54.35436213794571 360,54.35436213794571 C504,54.35436213794571 576,73.76551401220776 720,73.76551401220776 C864,73.76551401220776 936,76.99491281713817 1080,76.99491281713817 C1224,76.99491281713817 1296,109.6862814945041 1440,109.6862814945041 L1440,200 L0,200 Z" fill="#3b82f6" opacity="0.3" /> <path d="M0,98.75836743857559 C144,98.75836743857559 216,51.046046038201126 360,51.046046038201126 C504,51.046046038201126 576,150.8968515329965 720,150.8968515329965 C864,150.8968515329965 936,103.38402106741817 1080,103.38402106741817 C1224,103.38402106741817 1296,91.88178463082927 1440,91.88178463082927 L1440,200 L0,200 Z" fill="#3b82f6" opacity="1" /> </svg>
CSS Usage
Copy CSS
.wave-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .wave-divider svg { display: block; width: 100%; height: 200px; } /* Usage: wrap a section with position: relative, then place a .wave-divider div inside it. */