Zum Inhalt springen
DE

SVG-Wellen-Generator

Erstelle SVG-Wellen, um die Abschnitte einer Website zu trennen: Ebenen, Amplitude, weicher, spitzer oder gestufter Stil. SVG herunterladen oder CSS-Code kopieren.

  • Kostenlos
  • Ohne Anmeldung
  • Kein Datei-Upload
  • Windows, Mac, Android, iPhone

Werkzeug wird geladen…

Über dieses Werkzeug

Zeichne Wellen für den Übergang zwischen zwei Abschnitten einer Seite: 1 bis 4 gestapelte Ebenen, Amplitude, Anzahl der Wellenberge, weicher, spitzer oder gestufter Stil, Farbe und Ausrichtung. Lade die SVG-Datei herunter oder kopiere den SVG- oder CSS-Code, bereit zum Einfügen.

Wann es hilft

Landingpages

Eine Welle unter dem Hero-Banner macht den Übergang zum Inhalt weicher und wirkt modern.

Footer

Eine umgedrehte Welle über dem Footer rahmt den unteren Teil der Website elegant ein.

Grafiken und Präsentationen

Das SVG lässt sich in Figma, Canva oder PowerPoint als bearbeitbare Vektorform importieren.

So funktioniert's

  1. Stelle Anzahl der Ebenen, Amplitude und Anzahl der Wellenberge ein.
  2. Klicke auf „Neue Welle“, bis du die passende Form findest.
  3. Lade das SVG herunter oder kopiere den Code.

So funktioniert es

Pro Ebene werden Punkte über die Breite in zufälligen Höhen um eine Grundlinie verteilt und dann mit Bézierkurven (weich), Strecken (spitz) oder Stufen verbunden. Nach vorn werden die Ebenen deckender.

Der Zufall stammt aus einem Generator mit Startwert: Derselbe Startwert ergibt genau dieselbe Welle. Der CSS-Code kodiert das SVG als data:-URL, direkt als Hintergrundbild nutzbar.

Tipps für beste Ergebnisse

  • Gib der Welle die Farbe des folgenden Abschnitts für einen unsichtbaren Übergang.
  • Eine geringe Amplitude (20 bis 40 %) und wenige Wellenberge wirken elegant.
  • Verringere auf dem Handy die Höhe: Eine auf schmalem Bildschirm gestreckte Welle wirkt sehr steil.
  • Mehrere Ebenen schaffen Tiefe; bleib bei zwei oder drei.

Häufige Probleme und Lösungen

Zwischen Welle und Abschnitt erscheint eine feine Linie

Pixelrundung erzeugt einen Haarstrich. Füge der Welle margin-bottom: -1px oder dem SVG display: block hinzu.

Die Welle wirkt auf dem Handy verzerrt

Sie streckt sich mit der Breite: Verringere ihre Höhe per Media Query.

Ich möchte die Welle andersherum

Aktiviere „Welle oben“, um sie unter einen Header zu setzen.

Häufige Fragen

Wie nutze ich die Welle auf meiner Website?

Füge den SVG-Code zwischen zwei Abschnitte ein oder nutze das bereitgestellte CSS: Es setzt die Welle als Hintergrundbild eines Trennblocks, ohne Datei zum Hosten.

Passt sich die Welle der Breite an?

Ja: Das SVG nutzt preserveAspectRatio="none" und streckt sich über die volle Bildschirmbreite.

Kann ich eine Welle wiederherstellen?

Ja: Jede Welle entsteht aus einem zufälligen Startwert, der mit deinen Einstellungen gespeichert wird; beim nächsten Besuch bleibt sie gleich.

Ist das SVG klein?

Ein paar Hundert Byte: viel kleiner als ein Bild und auf jedem Bildschirm scharf.

Ähnliche Suchanfragen

Immer noch ein Problem?

Frag im Forum: Kategorie, Werkzeug, Datenblatt deines Geräts und Testergebnis werden automatisch ausgefüllt.