Zum Inhalt springen
Musterli
Unterstützen
CSS-Effekte und Layouts

Abschnittstrenner-Generator (SVG Section Divider)

Wellen, Bögen, Schrägen, Zacken und mehr als Übergang zwischen zwei Website-Abschnitten. Ein SVG, das sich jeder Breite anpasst, mit HTML und CSS zum Kopieren.

Generator öffnen

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

Beispielmotiv aus dem Abschnittstrenner-Generator

Mit einem Preset starten

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

Worum geht’s?

Ein Abschnittstrenner ist die Kante zwischen zwei Bereichen einer Website, zum Beispiel eine Welle zwischen dem Kopfbereich und dem Inhalt. Statt einer geraden Linie entsteht ein weicher oder markanter Übergang. Der Trenner ist ein kleines SVG, das sich jeder Bildschirmbreite anpasst.

Wofür du es brauchst

  • Kopfbereich und Hero

    Eine Welle oder ein Bogen am unteren Rand des Hero-Bereichs führt den Blick weich in den Inhalt.

  • Landingpages

    Wechselnde Farben pro Abschnitt wirken mit Schrägen oder Zacken lebendiger als mit geraden Kanten.

  • Baukästen und CMS

    Das SVG passt in jeden HTML-Block, etwa in WordPress, Webflow oder Framer, und braucht kein Script.

So geht’s

Wähl eine Form wie Welle, Bogen, Schräge oder Zacken und stelle Anzahl und Ebenen ein. Die Farbe der Form ist die Farbe des nächsten Abschnitts. Mit Position, Spiegeln und Umkehren passt du an, wo der Trenner sitzt. Kopiere dann das HTML-Beispiel oder die Tailwind-Klassen, oder lade SVG und PNG herunter.

Abschnittstrenner-Generator jetzt ausprobieren

Tipps

  • Nimm als Farbe der Form genau die Hintergrundfarbe des nächsten Abschnitts. Dann wirkt der Übergang nahtlos.
  • Zwei oder drei Ebenen geben Tiefe. Die hinteren Ebenen sind heller und schauen hinter der vorderen hervor.
  • Der Code setzt den Trenner einen Pixel über die Kante. Das verhindert eine feine Lücke, die beim Runden im Browser entstehen kann.

Häufige Fragen

Wie passt sich der Trenner an die Breite an?
Das SVG hat preserveAspectRatio="none". Es dehnt sich auf jede Breite, die Höhe legst du in CSS fest. Im Code wächst die Höhe mit clamp() mit der Breite mit, zwischen einer kleinsten Höhe und der Höhe deines Designs.
Brauche ich JavaScript?
Nein. Der Trenner ist reines SVG mit ein paar Zeilen CSS. Er lädt sofort und funktioniert in jedem Browser.
Ist der Trenner barrierefrei?
Ja. Er ist reine Dekoration und darum mit aria-hidden für Screenreader ausgeblendet. Er lässt sich nicht fokussieren und blockiert keine Klicks.
Wie setze ich den Trenner oben an einen Abschnitt?
Stell die Position auf Oben. Die Form zeigt dann nach unten und der Code setzt den Trenner an die obere Kante. Mit Umkehren füllt die Farbe die andere Seite der Kante.

Passende Generatoren

Alle Generatoren in CSS-Effekte und Layouts