Zum Inhalt springen
Musterli

SVG-Wellen

Geschichtete Wellen für Abschnitte, Header und Hintergründe. Als SVG, CSS oder Bild exportieren.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem SVG-Wellen

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

SVG-Wellen sind leichte Vektorgrafiken, mit denen du Abschnitte einer Website weich voneinander trennst. Statt einer harten Kante läuft eine Fläche in Wellen aus. Mehrere Ebenen in abgestuften Farben erzeugen Tiefe, die Datei bleibt trotzdem nur wenige Kilobyte gross.

So geht’s

Wähle die Anzahl Ebenen und Punkte, stelle Höhe, Glätte und Abdeckung ein und lege fest, ob die Wellen von unten oder von oben kommen. Mit der Leertaste würfelst du neue Varianten. Exportiere als SVG, CSS-Hintergrund oder Bild.

SVG-Wellen jetzt ausprobieren

Häufige Fragen

Wie setze ich die Welle zwischen zwei Abschnitte?
Lade das SVG herunter und platziere es am unteren Rand des oberen Abschnitts. Wähle als Wellenfarbe die Hintergrundfarbe des nächsten Abschnitts, dann gehen beide nahtlos ineinander über.
Bleibt die Welle auf breiten Bildschirmen scharf?
Ja. Als Vektorgrafik skaliert sie ohne Qualitätsverlust. Stelle die Breite im CSS auf 100 Prozent und lass die Höhe mitwachsen.
Was bewirkt die Glätte?
Sie bestimmt, wie weich die Kurven zwischen den Punkten verlaufen. Wenig Glätte ergibt kantige, bergige Formen, viel Glätte ruhige, runde Wellen.
Kann ich die Wellen umdrehen?
Ja. Mit der Richtung wählst du, ob die Wellen von unten oder von oben in die Fläche ragen.

Passende Generatoren

Alle Generatoren in Hintergründe