SVG wave generator
Tweak the wave until you like it, generate other variations with one tap and copy the SVG. It stretches to the screen width and stays light, with no image.
How to useWaves to separate sections
Available in: 
SVG wave generator: what it is for
Adjust the height, number of waves, variation and how many transparent layers the wave has, choose the color and style (smooth, peaked or stepped) and generate variations with one tap. The flip option turns the wave upside down.
The SVG comes with a 1440 px wide viewBox and preserveAspectRatio=none, so it stretches to the screen width. Download the file or copy the code.
How to use
- Adjust height, waves, variation and layers.
- Choose color and style and generate more waves until you like one.
- Download or copy the SVG and paste it between sections.
When to use it
- Separating landing page sections.
- Modern-looking headers and footers.
- Banner and header backgrounds.
Frequently asked questions
How do I use the wave on my site?
Paste the SVG between two sections, right after the end of one and before the next. Use the color of the lower section for the wave and the upper section's color for the background, or the other way around with the flip option.
Does the wave look good on phones?
Yes. The SVG uses preserveAspectRatio=none and 100% width, so it stretches to the screen width while keeping the height you set in CSS.
Can I use it in commercial projects?
Yes. The wave is generated here, in your browser, and it's yours.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.