So nutzt du: 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.
Auch gesucht als: wave generator, css wave, section divider generator, wavy background svg, wave svg, shape divider, layered waves generator.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich SVG Wave Generator als Web-App installieren und offline nutzen?
Ja. SVG Wave Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.