How to use the SVG Wave Generator
- Click Shuffle waves for a new random wave, then + Add wave or remove one with ×, and fine-tune crests and height.
- Choose Smooth, Peaks or Steps, and whether the wave sits at the bottom or top of a section.
- Give each wave its own color and opacity (or set one color for all), reshape a single wave with ↻, and pick the background behind it.
- Copy the SVG, or the CSS background version, or download the file.
Adding a wave divider to a section
The SVG uses a wide viewBox (1440 × 320) with preserveAspectRatio="none", so it stretches to the full width of any section. Place it at the edge of the section whose color it matches:
<section class="hero">
…
<svg class="wave" viewBox="0 0 1440 320" preserveAspectRatio="none">…</svg>
</section>
.hero { position: relative; }
.wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; }Or use the CSS background output — the SVG is encoded into a url("data:image/svg+xml,…") so you need no extra file. Each layer is a single <path>; layered waves get progressively lighter shades of your color for depth.
Related: SVG Blob Generator, CSS Gradient Generator, SVG Optimizer.
Also searched as: wave generator, css wave, section divider generator, wavy background svg, wave svg, shape divider, layered waves generator.
Tools that pair well with the SVG Wave Generator
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
How do I add a wave divider between sections?
Generate a wave, copy the SVG and place it at the bottom (or top) of the section, absolutely positioned with width: 100%. Set the wave color to the next section’s background color.
Why does the wave stretch to any width?
The SVG uses preserveAspectRatio="none", so it scales horizontally to fill the container while you control its height in CSS.
Can I use it in Webflow or WordPress?
Yes — paste the SVG into an Embed / HTML block, or use the CSS background version in your stylesheet.
Are the waves free to use?
Yes. They are generated on your device; use them anywhere without attribution.
Can I install SVG Wave Generator as a web app and use it offline?
Yes. SVG Wave Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.