So nutzt du: CSS Clip-path Generator
- Wähle eine Start-Form — Polygone, Kreis, Ellipse oder ein abgerundetes Inset.
- Ziehe die Punkte über das Bild. Wähle einen Punkt aus und nutze + Punkt hinzufügen, um danach einen einzufügen, oder Punkt entfernen. Starte mit Rechteck, um deine eigene Form zu zeichnen.
- Für Kreise, Ellipsen und Insets nutzt du die Regler im Panel.
- Kopiere das CSS und wende es auf ein beliebiges Bild, Video oder Element an — mit Eigenes Bild verwenden siehst du eine Vorschau mit deinem Bild.
clip-path in Kürze
clip-path blendet alles außerhalb einer Form aus. Das Element behält seine Größe und sein Layout; nur der sichtbare Bereich ändert sich. Das eignet sich ideal für Hero-Bilder, Avatare, Abschnittsformen und Hover-Effekte (clip-path-Werte mit gleicher Punktanzahl lassen sich mit transition animieren).
| Funktion | Beispiel |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) — ein Dreieck; beliebig viele Punkte |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px) — ein abgerundetes Rechteck, von den Rändern eingeschnitten |
Prozentwerte beziehen sich auf die Box des Elements, daher skaliert die Form mit. Alle modernen Browser unterstützen clip-path-Formen; die -webkit--Zeile deckt ältere Safari-Versionen ab. Wenn du Kanten weich auslaufen lassen statt abschneiden willst, nutze den CSS Mask Generator; für organische Formen den SVG Blob Generator.
Auch gesucht als: clip path generator, clip-path polygon, css formen erstellen, clip path maker, polygon generator css, clip-path kreis, css bild form, clippy alternative.
Passende Tools zu: CSS Clip-path Generator
- Border-Radius Generator — Runde die Ecken beliebiger Boxen ab: Zieh einen Regler für alle Ecken oder stell jede Ecke einzeln ein, wechsle zu elliptischen Ecken für Blob- und Blattformen und kopiere das kürzeste gültige border-radius-CSS.
- CSS Dreieck Generator — Erstelle ein reines CSS-Dreieck für einen Tooltip-Pfeil, ein Dropdown-Caret oder eine Sprechblase: Wähle eine von 8 Richtungen, Breite, Höhe und Farbe und kopiere entweder den klassischen Border-Trick oder die einfachere clip-path-Variante.
- CSS-Filter-Generator — Passe Blur, Helligkeit, Kontrast, Sättigung, Farbton, Graustufen, Sepia, Invertieren und Schlagschatten an einem Beispiel- oder eigenen Bild an und kopiere das CSS für filter.
- SVG Wellen Generator — Gestalte wellige Abschnitts-Trenner für Landingpages: Wellen hinzufügen oder entfernen (bis zu 6, jeweils mit eigener Farbe, Deckkraft und Form), Anzahl der Kämme, Höhe und Glättung festlegen, Farben wählen und bestimmen, ob die Welle oben oder unten sitzt.
Häufige Fragen
Wie erstelle ich eine CSS-Polygonform?
Wähle hier eine Startform, ziehe die Punkte an die gewünschte Stelle und kopiere die Zeile clip-path: polygon(…). Jeder Punkt ist ein x%-y%-Paar relativ zum Element.
Wie füge ich einem clip-path-Polygon weitere Punkte hinzu?
Wähle einen Punkt aus und klicke auf + Punkt hinzufügen: Ein neuer Punkt erscheint auf halber Strecke zum nächsten, bereit zum Ziehen. Ein Doppelklick auf das Bild setzt einen Punkt an die nächstgelegene Kante; Punkt entfernen löscht den ausgewählten.
Kann ich clip-path animieren?
Ja — zwischen zwei clip-path-Werten desselben Typs mit gleicher Punktanzahl kannst du mit transition oder animation übergehen, zum Beispiel zwischen zwei polygon()-Formen mit je 6 Punkten.
Funktioniert clip-path in allen Browsern?
Grundformen (polygon, circle, ellipse, inset) funktionieren in allen modernen Browsern. Füge für ältere Safari-Versionen die Zeile -webkit-clip-path hinzu, die das Tool enthält.
Warum verschwindet mein Schatten bei clip-path?
clip-path schneidet auch box-shadow ab. Verpacke das Element in einem übergeordneten Container und nutze stattdessen filter: drop-shadow() auf dem Container.
Kann ich CSS Clip-path Generator als Web-App installieren und offline nutzen?
Ja. CSS Clip-path Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.