CSS Clip-Path Generator
Kostenloser Online-CSS-Clip-Path-Generator. Gestalten Sie Polygon-, Kreis-, Ellipsen- und Inset-Formen mit verschiebbaren Punkten, Live-Vorschau und Codekopieren mit einem Klick.
Was ist CSS clip-path?
clip-path ist eine CSS-Eigenschaft, die ein Element auf eine Grundform oder einen Pfad zuschneidet. Alles außerhalb der Form wird ausgeblendet, sodass Sie ein rechteckiges Bild oder einen Container ohne Bildbearbeitung in ein Dreieck, einen Kreis, ein Sechseck, einen schrägen Banner oder ein beliebiges Polygon verwandeln können.
Welche Browser unterstützen clip-path?
Alle modernen Browser unterstützen die von diesem Generator verwendeten Grundform-Funktionen: polygon(), circle(), ellipse() und inset(). Dazu gehören Chrome, Edge, Firefox, Safari und Opera. Das Präfix -webkit-clip-path ist nur für sehr alte mobile Safari-Versionen nötig.
Wie funktioniert der Polygon-Modus?
Im Polygon-Modus zeigt die Vorschau jeden Eckpunkt als verschiebbaren Punkt. Ziehen Sie einen Punkt, um ihn zu bewegen, doppelklicken Sie in den leeren Bereich, um einen neuen einzufügen, klicken Sie einen Punkt an, um ihn auszuwählen, und entfernen Sie ihn mit der Löschen-Schaltfläche. Der CSS-Wert wird in Echtzeit mit Prozentkoordinaten aktualisiert.
Was bedeuten die Prozentwerte in polygon()?
Jeder Eckpunkt wird als X-Y-Paar in Prozent angegeben, gemessen von der oberen linken Ecke des Elements. Da die Werte relativ zur Elementgröße sind, skaliert die Form mit dem Element und bleibt bei jeder Bildschirmbreite responsiv.
Was ist der Unterschied zwischen circle, ellipse und inset?
circle(Radius at x y) schneidet einen Kreis mit einem Radius zu, ellipse(rx ry at x y) erlaubt unterschiedliche horizontale und vertikale Radien, und inset(oben rechts unten links) schneidet ein Rechteck zu, das von jeder Seite eingeschoben wird. Dieser Generator bietet für alle Parameter Schieberegler und Zahleneingaben.
Beeinflusst clip-path Layout oder Klicks?
clip-path ist rein visuell. Das Element behält seine ursprüngliche Box im Layout, nichts um es herum verschiebt sich. Zeigerereignisse wie Klicks werden jedoch nur im sichtbaren zugeschnittenen Bereich registriert, was sich für individuell geformte Schaltflächen eignet.
Kann ich clip-path animieren?
Ja. Browser können weich zwischen zwei clip-path-Werten überblenden, wenn Formfunktion und Punktezahl übereinstimmen, z. B. von einem großen zu einem kleinen inset oder zwischen zwei Polygonen mit gleicher Eckpunktanzahl. Animieren Sie es mit der CSS-Eigenschaft transition.
Werden mein Bild oder meine Daten hochgeladen?
Nein. Das Vorschaubild ist ein lokal auf einem Canvas gezeichneter Verlauf, und alle Berechnungen erfolgen in Ihrem Browser. Nichts wird an einen Server gesendet; das Tool funktioniert nach dem Laden auch offline.
Was sind typische Anwendungsfälle für clip-path?
Beliebte Einsätze sind diagonale Hero-Sektionen, sechseckige oder runde Avatar-Masken, dreieckige Sprechblasen-Spitzen, kreative Bildcollagen, abgeschrägte Karten-Ecken und individuell geformte Schaltflächen – ganz ohne Bildbearbeitungssoftware.
So verwenden Sie CSS Clip-Path Generator
Formen Sie jedes Element mit CSS clip-path, statt Bilder zu bearbeiten. Wählen Sie eine Formfunktion, ziehen Sie die Griffe und kopieren Sie produktionsreifes CSS. Alles läuft lokal im Browser.
- Wählen Sie einen Modus: Polygon, Kreis, Ellipse oder Inset.
- Ziehen Sie im Polygon-Modus die Eckpunkte, doppelklicken Sie in den leeren Bereich, um einen Punkt hinzuzufügen, und markieren Sie einen, bevor Sie ihn löschen.
- Stellen Sie in den Modi Kreis, Ellipse und Inset jeden Wert mit den Schiebereglern fein ein oder tippen Sie einen exakten Prozentsatz.
- Sehen Sie zu, wie die Live-Vorschau über einem lokal erzeugten Verlaufsmusterbild aktualisiert wird.
- Kopieren Sie die einzeilige clip-path-Regel und fügen Sie sie in Ihr Stylesheet ein.
Halten Sie die Anzahl der Polygonpunkte zwischen zwei Zuständen gleich, dann lässt sich die Form mit einer CSS-Transition weich animieren.
Verwandte Tools
- CSS Box Shadow Generator Kostenloser Online-CSS-Box-Shadow-Generator. Erstellen Sie visuell schöne Schatten mit einstellbarem Versatz, Unschärfe, Ausbreitung, Farbe und Inset. Live-Vorschau und sofortiges Code-Kopieren.
- CSS-Gradient-Generator Erstellen Sie visuell atemberaubende CSS-Gradienten. Generieren Sie lineare, radiale und konische Gradienten mit mehreren Farbstops, Winkeln und Positionen. Kopieren Sie produktionsreifen CSS-Code sofort.
- Border Radius Generator Kostenloser Online Border-Radius-Generator. Ziehen Sie 8 Griffe oder wählen Sie eine Blob-Vorlage, um organische CSS-Formen zu erstellen und den Code sofort zu kopieren.
- Farbkonverter Kostenloser Online-Farbkonverter. Konvertieren Sie HEX, RGB, HSL, HSV Formate sofort mit visueller Farbauswahl. 100% privat, läuft in Ihrem Browser.
- CSS Easing Generator Kostenloser Online-CSS-Easing-Generator. Ziehen Sie die cubic-bezier-Kontrollpunkte auf einer interaktiven Kurve, wählen Sie aus 18 Vorlagen, sehen Sie eine Ball-Loop-Animation und kopieren Sie die Timing-Funktion sofort.
- CSS Text-Shadow-Generator Kostenloser Online-Text-Shadow-Generator. Stapeln Sie mehrere Schattenebenen mit Versatz, Unschärfe, Farbe und Deckkraft, testen Sie Vorlagen wie Neon, 3D oder Retro und kopieren Sie das CSS sofort.
- CSS Beautifier CSS-Code sofort formatieren und verschönern. Minifiziertes CSS in lesbaren, gut eingerückten Code umwandeln mit anpassbaren Optionen.
- CSS Minifier Kostenloser Online-CSS-Minifier. Komprimieren und optimieren Sie CSS-Code sofort durch Entfernen von Leerzeichen, Kommentaren und unnötigen Zeichen. Reduzieren Sie die Dateigröße für schnellere Webperformance.