Comment utiliser : Générateur de vagues SVG
- Cliquez sur Mélanger les vagues pour obtenir une nouvelle vague aléatoire, puis sur + Ajouter une vague ou supprimez-en une avec ×, et ajustez les crêtes et la hauteur.
- Choisissez Lisse, Pics ou Marches, puis indiquez si la vague se place en bas ou en haut d'une section.
- Attribuez à chaque vague sa propre couleur et son opacité (ou une seule couleur pour toutes), remodelez une vague avec ↻ et choisissez le fond situé derrière elle.
- Copiez le SVG, la version fond CSS, ou téléchargez le fichier.
Ajouter un séparateur en vague à une section
Le SVG utilise un viewBox large (1440 × 320) avec preserveAspectRatio="none", il s'étire donc sur toute la largeur de n'importe quelle section. Placez-le sur le bord de la section dont la couleur correspond à la sienne :
<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; }Vous pouvez aussi utiliser le résultat fond CSS : le SVG est encodé dans un url("data:image/svg+xml,…"), aucun fichier supplémentaire n'est nécessaire. Chaque couche est un seul <path> ; les vagues superposées reçoivent des teintes de plus en plus claires de votre couleur pour donner de la profondeur.
Voir aussi : Générateur de blobs SVG, Générateur de dégradés CSS, Optimiseur SVG.
Aussi recherché comme : générateur de vague, vague css, générateur de séparateur de section, fond ondulé svg, vague svg, séparateur de forme svg, générateur de vagues superposées.
Outils complémentaires : Générateur de vagues SVG
- Générateur de masque CSS — Faites disparaître en fondu les images et les sections au lieu de les couper net : estompez un bord, le haut et le bas, les quatre bords, une vignette radiale ou un spot, découpez l'élément en rayures, ou appliquez un masque en forme (étoile, cœur, hexagone, flèche…) aux bords doux et progressifs que clip-path ne sait pas faire.
- Générateur clip-path CSS — Découpez images et éléments en n'importe quelle forme : choisissez l'une des 15 formes de départ (triangle, hexagone, étoile, flèche, chevron, bulle de dialogue, cercle, ellipse, rectangle arrondi en inset…), puis déplacez les points sur un exemple ou sur votre propre image.
- Générateur border-radius — Arrondissez les coins de n'importe quel élément : utilisez un seul curseur pour tous les coins, ou réglez chaque coin séparément.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
Questions fréquentes
Comment ajouter un séparateur en vague entre deux sections ?
Générez une vague, copiez le SVG et placez-le en bas (ou en haut) de la section, en position absolue avec width: 100%. Réglez la couleur de la vague sur la couleur de fond de la section suivante.
Pourquoi la vague s'étire-t-elle à n'importe quelle largeur ?
Le SVG utilise preserveAspectRatio="none" : il se redimensionne horizontalement pour remplir le conteneur, tandis que vous contrôlez sa hauteur en CSS.
Puis-je l'utiliser avec Webflow ou WordPress ?
Oui : collez le SVG dans un bloc Embed / HTML, ou utilisez la version fond CSS dans votre feuille de style.
Les vagues sont-elles libres de droits ?
Oui. Elles sont générées directement sur votre appareil ; vous pouvez les utiliser partout sans attribution.
Puis-je installer Générateur de vagues SVG en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de vagues SVG 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.