CSS-clip-path-Generator

Was ist CSS-clip-path-Generator?

Der CSS-clip-path-Generator ist ein kostenloser visueller Editor für die CSS-Eigenschaft clip-path, gemacht für Frontend-Entwickler und Designer, die Elemente in nicht-rechteckige Formen beschneiden möchten. Wähle ein Preset aus dem Dropdown – circle() und ellipse() mit Radius und Mittelpunkt, polygon() mit beliebig vielen Eckpunkten, inset() mit vier Kantenabständen oder eine gerundete inset()-Variante mit Eckenradius. Jeder Parameter ist ein Prozentwert, der über eine Zahleneingabe gesetzt wird, und eine Vorschaubox mit Schachbrett-Hintergrund zeigt die resultierende Form in Echtzeit. Das vollständige clip-path-CSS wird für dich generiert. Nutze es, um Bilder zu maskieren, diagonale Abschnittstrenner zu schneiden, sechseckige Avatare zu bauen oder Sprechblasenformen zu erstellen, ohne Koordinaten von Hand abzuzählen.

So verwendest du CSS-clip-path-Generator

1. Wähle eine Form im Preset-Dropdown: Kreis, Ellipse, Polygon, Inset oder Gerundet.
2. Für Kreis oder Ellipse: Lege den Radius (oder die X/Y-Radien) und die Mittelpunkt-X/Y-Position in Prozent fest.
3. Für Polygon: Bearbeite den X- und Y-Prozentwert jedes Eckpunkts; klicke auf Punkt hinzufügen, um weitere Eckpunkte hinzuzufügen, und ordne sie durch Bearbeiten der Werte neu an.
4. Für Inset oder Gerundet: Lege die Abstände oben, rechts, unten und links fest; Gerundet nimmt zusätzlich einen Eckenradius.
5. Beobachte, wie die Live-Vorschau die Box beim Tippen beschneidet.
6. Kopiere das generierte clip-path-CSS und füge es in dein Stylesheet ein.

Beispiele

Preset Kreis, Radius 50%, Mittelpunkt 50% 50%

clip-path: circle(50% at 50% 50%);

Preset Polygon, Punkte (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preset Gerundet, Inset 10% auf allen Seiten, Eckenradius 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Häufig gestellte Fragen

Wofür wird clip-path verwendet?

Die CSS-Eigenschaft clip-path beschneidet ein Element auf eine Grundform, sodass nur der Bereich innerhalb der Form sichtbar bleibt. Sie eignet sich hervorragend für runde Avatare, diagonale Abschnittsschnitte, sechseckige Raster, Bildmasken und Sprechblasen – ganz ohne zusätzliche Bilder oder SVG-Dateien.

Wie funktioniert das Polygon-Preset?

polygon() zeichnet eine Form, indem es eine Liste von X/Y-Eckpunkten der Reihe nach verbindet. Bearbeite die Prozentwerte jedes Punkts und nutze Punkt hinzufügen, um weitere Eckpunkte einzufügen; der letzte Punkt verbindet sich automatisch wieder mit dem ersten. Es werden mindestens drei Punkte beibehalten, damit die Form gültig bleibt.

Warum sind die Werte in Prozent?

Prozentwerte sorgen dafür, dass der Clip mit dem Element skaliert, sodass derselbe clip-path in jeder Größe funktioniert. 0% ist die linke oder obere Kante und 100% die rechte oder untere Kante der Element-Box.

Was fügt das Gerundet-Preset hinzu?

Das Gerundet-Preset verwendet inset() mit einem round-Eckenradius und erzeugt ein Rechteck, das an jeder Seite nach innen beschnitten ist und abgerundete Ecken erhält – praktisch für sanft gerahmte Zuschnitte, die ein einfaches border-radius nicht mit einem Inset-Clip kombinieren kann.

Werden meine Daten irgendwohin gesendet?

Nein. Der Generator läuft vollständig in deinem Browser mit JavaScript – deine Formwerte verlassen nie dein Gerät, sodass er privat und nach dem Laden der Seite sogar offline funktioniert.