CSS-Clip-Path-Generator

Dieses Tool erzeugt einen CSS-clip-path-Wert aus einer Formvorlage — Kreis, Ellipse, Dreieck, Fünfeck, Sechseck, Stern oder ein abgerundetes Rechteck — und zeigt die ausgeschnittene Form live in einer Vorschaubox, bevor du das CSS kopierst. Es ist nicht nötig, polygon()-Koordinaten für gängige Formen von Hand zu berechnen.

Was ist dieses Tool?

clip-path ist die CSS-Eigenschaft, die alles außerhalb eines definierten Bereichs eines Elements ausblendet und nur die Form im Inneren sichtbar lässt — der Rest der Elementbox ist im Layout weiterhin vorhanden, wird lediglich nicht gezeichnet. Sie akzeptiert grundlegende Formfunktionen wie circle(), ellipse(), inset() und polygon(), wobei Letztere eine beliebige Liste von x/y-Koordinatenpaaren entgegennimmt, um jede geradlinig begrenzte Form zu definieren.

polygon()-Koordinaten sind der am schwierigsten von Hand zu schreibende Teil — ein Fünfeck, Sechseck oder Stern benötigt jeweils mehrere präzise platzierte Punkte, und ein falscher Punkt verzerrt die gesamte Form. Dieses Tool berechnet diese Koordinaten für dich anhand einer Formvorlage, aktualisiert die Live-Vorschau sofort und liefert dir den exakten clip-path-CSS-Code zum Kopieren.

Quelle: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — die Spezifikationen, die clip-path und seine grundlegenden Formfunktionen definieren.

Warum sollte man es nutzen?

Die Live-Vorschau schneidet eine echte Vorschaubox in die gewählte Form, sodass du das tatsächliche Ergebnis siehst, statt es dir anhand von Koordinaten vorzustellen.
Sieben Formvorlagen — Kreis, Ellipse, Dreieck, Fünfeck, Sechseck, Stern und abgerundetes Rechteck — decken die überwiegende Mehrheit der clip-path-Anwendungsfälle ab, ohne polygon()-Punkte von Hand zu schreiben.
Kreis-, Ellipsen- und Rechteck-Vorlagen enthalten einen Größen-/Rundungsregler, mit dem du die Form feinjustieren kannst, ohne Koordinaten zu bearbeiten.
Erzeugt standardmäßigen clip-path-CSS-Code, der auf jedes Element angewendet werden kann.
Läuft komplett in deinem Browser — nichts, was du einstellst, wird irgendwohin hochgeladen. Kostenlos, keine Anmeldung, funktioniert auf dem Handy.

Anleitung

Wähle eine Form aus dem Dropdown-Menü — Kreis, Ellipse, Dreieck, Fünfeck, Sechseck, Stern oder abgerundetes Rechteck.
Passe bei Kreis-, Ellipsen- und Rechteck-Formen den Größen-/Rundungsregler an, um den Ausschnitt fein abzustimmen.
Beobachte, wie sich die Vorschaubox live aktualisiert, wenn du die Form oder den Regler änderst.
Kopiere den generierten clip-path-CSS-Code und füge ihn in das Element ein, das du ausschneiden möchtest.
Für ein Bild statt einer Vollfarbe wende dieselbe clip-path-Eigenschaft auf ein <img>-Element oder ein Element mit einer background-image an.

Beispiel

Eingabe

Form: Sechseck

Ausgabe

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Ein regelmäßiger Sechseck-Ausschnitt, häufig verwendet für badge-artige Profilfotos oder Feature-Icons.

Grundformen vs. polygon()

Kreis, Ellipse und inset (abgerundetes Rechteck) sind in CSS integrierte grundlegende Formfunktionen mit eigener, einfacher Syntax — ein oder zwei Radien plus eine optionale Mittelpunktposition oder Eckrundung. Dreieck, Fünfeck, Sechseck und Stern sind keine integrierten Formen; sie werden alle mit polygon() ausgedrückt, einer flachen Liste von x/y-Koordinatenpaaren, die den Umriss der Form nachzeichnet. Dieses Tool berechnet diese Koordinaten automatisch für regelmäßige (gleichmäßig verteilte) Polygone und einen fünfzackigen Stern — genau der mühsame Teil, den man von Hand richtig hinbekommen muss.

Häufige clip-path-Muster

Kreisförmiger Avatar oder Badge: circle() mit mittlerem Radius, oft kombiniert mit einem quadratischen Ausgangsbild, damit der Kreis nicht zu einer Ellipse verzerrt wird.
Schräger Abschnitts-Trenner: ein benutzerdefiniertes Polygon (hier nicht als Vorlage enthalten), das die obere oder untere Kante eines vollbreiten Abschnitts schräg stellt, für einen nicht-rechteckigen Seitenumbruch.
Stern-Bewertungssymbol oder Badge-Form: die Stern-Vorlage, nützlich als dekorative Form statt eines handgezeichneten SVGs für einfache Fälle.
Sechseck-Fotoraster: sechseckig ausgeschnittene Bilder in einem Wabenlayout angeordnet, ein gängiges Muster für Portfolio-/Team-Seiten.
Abgerundetes Rechteck als leichtgewichtige Alternative zu border-radius, wenn der Ausschnitt auch überlaufenden Kindinhalt abschneiden soll, da border-radius allein Kinder ohne zusätzliches overflow:hidden nicht ausschneidet.

Kombination mit anderen CSS-Tools

clip-path wird häufig mit einem CSS-Verlauf als ausgeschnittenem Hintergrund kombiniert, oder mit einem box-shadow, der auf ein umschließendes Element angewendet wird (da clip-path auch den eigenen Schatten eines Elements ausschneidet, ist ein Schatten auf einem Elternelement der übliche Workaround für eine ausgeschnittene Form, die trotzdem schweben soll).

→ CSS-Gradient-Generator · Border-Radius-Generator · Box-Shadow-Generator

Häufig gestellte Fragen

Beeinflusst clip-path die Layoutgröße des Elements?

Nein — das Element behält für Layoutzwecke seine ursprüngliche Boxgröße und Position; clip-path ändert nur, was gezeichnet wird. Umgebende Elemente werden so angeordnet, als wäre der Ausschnitt nicht angewendet worden, was überraschend sein kann, wenn du erwartest, dass sich die ausgeschnittene Form wie ein verkleinertes Element verhält.

Warum wird mein box-shadow auf der ausgeschnittenen Form nicht angezeigt?

clip-path schneidet die gesamte Darstellung des Elements aus, einschließlich jedes Schattens, den es wirft, sodass der eigene box-shadow eines kreis- oder polygon-ausgeschnittenen Elements an der Ausschnittgrenze abgeschnitten wird. Um einen Schatten zu erhalten, der der sichtbaren Form folgt, wende box-shadow stattdessen auf ein nicht ausgeschnittenes umschließendes Element um das ausgeschnittene Element herum an.

Kann ich eine clip-path-Form animieren oder überblenden?

Ja, aber nur zwischen zwei clip-path-Werten desselben Typs und mit der gleichen Anzahl an Punkten — zum Beispiel ein polygon() mit 6 Punkten, das zu einem anderen polygon() mit 6 Punkten übergeht. Ein Übergang zwischen grundlegend verschiedenen Formen (ein circle() zu einem polygon()) wird browserübergreifend im Allgemeinen nicht sauber animiert.

Kann clip-path auf Hintergrundbilder angewendet werden, nicht nur auf Elementinhalte?

clip-path schneidet das gesamte Element aus — einschließlich background-image, background-color, Rahmen und Inhalt zusammen — statt speziell nur den Hintergrund. Wenn du nur ein Hintergrundbild ausschneiden möchtest, während anderer Inhalt unbeschnitten bleibt, wende clip-path auf ein separates Element an, das nur den Hintergrund enthält.

Wird clip-path von allen modernen Browsern unterstützt?

Ja — clip-path mit grundlegenden Formfunktionen (circle, ellipse, inset, polygon) ist laut den Kompatibilitätsdaten von MDN seit Januar 2020 Baseline und in den wichtigsten Browsern weit verbreitet verfügbar. Es ist im Allgemeinen sicher, es in aktuellen Browserversionen in Produktion ohne Fallback zu verwenden.