CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Formtyp

Radius: 40%

Mitte X: 50%

Mitte Y: 50%

Live-Vorschau

Generiertes CSS

.element {
  clip-path: circle(40% at 50% 50%);
}

Über dieses Tool

Der CSS Clip-Path-Generator erstellt clip-path-Werte für vier Formtypen: circle(), ellipse(), inset() und polygon().

Ermöglicht kreative Layouts, Bildmasken und Hero-Bereich-Formen ohne SVG-Dateien. Alle Parameter aktualisieren die Live-Vorschau in Echtzeit.

Anleitung

Wählen Sie einen Formtyp: circle, ellipse, inset oder polygon.
Passen Sie die Schieberegler an, um die Formparameter zu konfigurieren.
Für Polygone eine voreingestellte Form aus der Liste wählen.
Die Live-Vorschau aktualisiert sich beim Anpassen.
Auf Kopieren klicken, um das CSS in die Zwischenablage zu kopieren.

Anwendungsfälle

Hero-Bereiche nutzen diagonale oder geschwungene clip-path-Formen als visuelle Trennlinien. Profilbilder nutzen circle(). Hover-Effekte nutzen clip-path-Animationen.

Häufige Fragen

Beeinflusst clip-path den klickbaren Bereich? — Ja. Ausgeblendete Bereiche sind nicht klickbar.
Kann ich clip-path animieren? — Ja. Zwischen zwei Polygon-Formen mit gleicher Punktanzahl ist eine Transition möglich.
Wird clip-path von allen Browsern unterstützt? — Ja, alle modernen Browser unterstützen es vollständig.