So nutzt du: SVG Wellen Generator
- Klicke auf Wellen mischen, um eine neue zufällige Welle zu erzeugen. Mit + Welle hinzufügen oder × entfernst du eine Welle. Feintune danach Kämme und Höhe.
- Wähle Sanft, Spitzen oder Stufen und lege fest, ob die Welle unten oder oben an einem Abschnitt sitzt.
- Gib jeder Welle eine eigene Farbe und Deckkraft (oder setze eine Farbe für alle). Mit ↻ formst du eine einzelne Welle neu und wählst den Hintergrund dahinter.
- Kopiere das SVG oder die Version als CSS-Hintergrund oder lade die Datei herunter.
Wellen-Trenner in einen Abschnitt einbauen
Das SVG verwendet ein breites viewBox (1440 × 320) mit preserveAspectRatio="none", damit es sich über die volle Breite jedes Abschnitts streckt. Platziere es am Rand des Abschnitts, dessen Farbe es übernehmen soll:
<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; }Alternativ nutzt du die Ausgabe als CSS-Hintergrund. Dabei wird das SVG in eine url("data:image/svg+xml,…") kodiert, sodass du keine zusätzliche Datei brauchst. Jede Ebene ist ein einzelner <path>. Geschichtete Wellen erhalten für mehr Tiefe zunehmend hellere Töne deiner Farbe.
Verwandte Tools: SVG Blob Generator, CSS Gradient Generator, SVG Optimizer.
Auch gesucht als: wellen generator, css welle, section divider generator, welliger hintergrund svg, wellen svg erstellen, shape divider, geschichtete wellen generator.
Passende Tools zu: SVG Wellen Generator
- CSS-Mask-Generator — Lass Bilder und Bereiche sanft ausblenden, statt hart abzuschneiden: eine Kante ausblenden, oben und unten, alle vier Kanten, eine radiale Vignette oder einen Spotlight-Effekt.
- CSS Clip-path Generator — Schneide Bilder und Elemente in beliebige Formen: Wähle eine von 15 Startformen — Dreieck, Sechseck, Stern, Pfeil, Chevron, Sprechblase, Kreis, Ellipse, abgerundetes Inset … — und ziehe die Punkte über ein Beispielbild oder dein eigenes.
- Border-Radius Generator — Runde die Ecken beliebiger Boxen ab: Zieh einen Regler für alle Ecken oder stell jede Ecke einzeln ein, wechsle zu elliptischen Ecken für Blob- und Blattformen und kopiere das kürzeste gültige border-radius-CSS.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
Häufige Fragen
Wie füge ich einen Wellen-Trenner zwischen Abschnitten ein?
Erzeuge eine Welle, kopiere das SVG und platziere es unten (oder oben) im Abschnitt, absolut positioniert mit width: 100%. Setze die Wellenfarbe auf die Hintergrundfarbe des nächsten Abschnitts.
Warum passt sich die Welle an jede Breite an?
Das SVG nutzt preserveAspectRatio="none". Dadurch skaliert es horizontal, um den Container zu füllen, während du die Höhe per CSS steuerst.
Kann ich es in Webflow oder WordPress verwenden?
Ja. Füge das SVG in einen Embed- oder HTML-Block ein oder nutze die CSS-Hintergrund-Version in deinem Stylesheet.
Sind die Wellen kostenlos nutzbar?
Ja. Sie werden auf deinem Gerät erzeugt. Du kannst sie überall ohne Quellenangabe verwenden.
Kann ich SVG Wellen Generator als Web-App installieren und offline nutzen?
Ja. SVG Wellen 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.