Clip-Path-Generator
Schneide Elemente in Form – wähle ein Polygon-Preset und ziehe seine Punkte oder nutze Kreis, Ellipse und inset.
Die Koordinaten werden in objectBoundingBox (0–1) umgerechnet, sodass der Clip mit jedem Element skaliert. Formen wie <polygon>, <rect> und <circle> werden automatisch in Pfade umgewandelt, Transformationen werden direkt in die Koordinaten eingerechnet.
Ziehe die Punkte in der Vorschau, um die Form des Polygons zu ändern.
So funktioniert der Clip-Path-Generator
Erstelle clip-path-Formen visuell mit Polygon-Presets und verschiebbaren Punkten und kopiere dann responsives CSS mit Prozentwerten.
Preset-Bibliothek
Zwölf Polygon-Presets – Dreiecke, Pfeile, Sterne, Sprechblasen – plus die Grundformen Kreis, Ellipse und inset. Starte mit einer Form, die deinem Ziel möglichst nahekommt.
Verschiebbare Punkte
Jeder Eckpunkt des Polygons ist ein Ziehpunkt in der Live-Vorschau. Ziehe, um die Form zu ändern, füge Zwischenpunkte für Details hinzu und entferne überflüssige Punkte – das CSS aktualisiert sich bei jeder Bewegung.
Geister-Vorschau
Der abgeschnittene Bereich bleibt als blasser „Geist“ sichtbar, sodass du immer siehst, was die Form vom ursprünglichen Element wegschneidet.
Ausgabe in Prozent
Alle Koordinaten sind Prozentwerte, daher skaliert derselbe clip-path mit jeder Elementgröße – ob Hero-Bilder, Karten oder randlose Sektionen in voller Breite.
Häufig gestellte Fragen
clip-path legt den sichtbaren Bereich eines Elements fest – alles außerhalb der Form wird ausgeblendet. Es funktioniert mit jedem Element, auch mit Bildern und Videos, und wirkt sich auf das Hit-Testing aus: Klicks außerhalb der Form gehen hindurch.
Prozentkoordinaten beziehen sich auf die Box des Elements, daher funktioniert ein Wert in jeder Größe und bleibt responsiv. Pixelkoordinaten würden nicht mehr passen, sobald sich die Größe des Elements ändert.
Ja – Übergänge zwischen zwei Polygonen mit gleich vielen Punkten laufen flüssig und werden in modernen Browsern vom Compositor ausgeführt. So entstehen Reveal-Effekte und Morphing-Formen.
clip-path ist eine Vektorform mit harten Kanten, mask-image unterstützt weiche Alpha-Verläufe und Bilder. Für klare geometrische Ausschnitte ist clip-path einfacher und ressourcenschonender.