Comment utiliser : 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.
Aussi recherché comme : wave generator, css wave, section divider generator, wavy background svg, wave svg, shape divider, layered waves generator.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer SVG Wave Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. SVG Wave Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.