Diese Seite nutzt datenschutzfreundliche Analyse-Daten aus erster Hand, um zu sehen, welche Seiten und Tools nützlich sind. Keine Daten werden an Werbetreibende oder Tracking-Dienste Dritter weitergegeben. Mehr erfahren

Tools · CSS · Clip-Path-Generator

Clip-Path-Generator

Erstelle eine CSS-clip-path-Form - Polygon, Kreis, Ellipse oder Inset - mit Live-Vorschau, und kopiere den Code.

Datei hier ablegen oder auswählen.

Läuft komplett im Browser. Es wird nichts hochgeladen.

So funktioniert es

  1. Wähle einen Formtyp (Polygon, Kreis, Ellipse oder Inset), oder eine Polygon-Vorlage.

  2. Ziehe die Punkte in der Vorschau, oder nutze die Regler, um die Form zu verfeinern.

  3. Kopiere das erzeugte clip-path-CSS.

Häufige Fragen

Nein. Die Form wird vollständig in deinem Browser erzeugt und angezeigt - das ist nur Mathematik und CSS-Text.

In dieser Version nicht - wähle die nächstliegende Vorlage und ziehe ihre vorhandenen Punkte. Ein vollständiger Punkt-Editor ist eine mögliche künftige Ergänzung.

Manche Kombinationen - wie ein Inset, das die ganze Box abdeckt - sind gültiges CSS, das alles wegschneidet. Kein Fehler, nur ein entarteter, aber legaler Wert.

Ja. Mit Tab zu einem Punkt springen und mit den Pfeiltasten bewegen - Shift für einen größeren Schritt.

Ähnliche Tools

CSS-Verlauf erstellen

Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.

 CSS-Schatten erstellen

Erstelle einen mehrschichtigen CSS-Schatten (box-shadow) mit Live-Vorschau, und kopiere den Code.

 CSS-Ecken abrunden

Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.

 Glassmorphism-Effekt erstellen

Erstelle eine Milchglas-Karte mit Hintergrundunschärfe, Transparenz und weichem Rand, und kopiere das CSS.

 Cubic-Bezier-Easing-Generator

Ziehe eine Kurve, um einen cubic-bezier()-Easing-Wert zu erstellen, sieh sie mit einem echten CSS-Übergang live abspielen, und kopiere den Code.

 CSS-Minifizierer & -Formatierer

Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.

 Flexbox-Spielwiese

Erstelle ein CSS-Flexbox-Layout - Richtung, Umbruch, Ausrichtung, Abstand sowie Wachstum, Schrumpfung und Basis je Element - mit Live-Vorschau, und kopiere den Code.

 Grid-Spielwiese

Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.

Kommentare

  1. Noch keine Kommentare. Teile deine Erfahrung als Erstes.
Deine Bewertung (optional)

Keine Bewertung ausgewählt