Skip to main content
FreeToolkit .ai

CSS-Clip-Path-Generator Erstellen Sie CSS-Clip-Path-Formen mit Voreinstellungen für Polygone, Kreise und Ellipsen.

CSS-Clip-Path-Generator illustration
🎨

CSS-Clip-Path-Generator

Erstellen Sie CSS-Clip-Path-Formen mit Voreinstellungen für Polygone, Kreise und Ellipsen.

1

Wählen Sie eine vorgefertigte Form

Wählen Sie aus vorgefertigten Vorlagen wie Dreieck, Hexagon, Stern, Kreis oder Ellipse.

2

Pfad anpassen

Bearbeiten Sie den clip-path-Wert direkt für eine präzise Kontrolle über die Form.

3

CSS kopieren

Vorschau der beschnittenen Form und Kopie des CSS mit webkit-Präfix.

Loading tool...

What Is CSS-Clip-Path-Generator?

Der CSS Clip Path Generator erstellt Beschneidemasken für HTML-Elemente mithilfe der clip-path-Eigenschaft. Clip-path definiert eine sichtbare Region für ein Element - alles außerhalb des Pfads wird ausgeblendet. Dieses Tool unterstützt mehrere Formfunktionen: polygon für benutzerdefinierte Mehrpunkteformen, circle für kreisförmige Beschneidungen, ellipse für ovale Formen und inset für rechteckige Beschneidungen mit optionaler Abrundung. Eine Bibliothek von vorgegebenen Formen umfasst Dreiecke, Trapeze, Parallelogramme, Rhomben, Fünfecke, Sechsecke und Sterne. Sie können auch den clip-path-Wert direkt bearbeiten, um benutzerdefinierte Formen zu erstellen. Der generierte CSS-Code enthält das -webkit-clip-path-Präfix für eine breitere Browserunterstützung. Clip-path ist leistungsstark bei der Erstellung nicht-rechteckiger Layouts, Bildmasken, kreativer Abschnittsteiler und einzigartiger UI-Elementformen.

Why Use CSS-Clip-Path-Generator?

  • Umfangreiche Vorlagenbibliothek, einschließlich Polygone, Kreise und Sterne
  • Direkte Bearbeitung von clip-path-Werten für benutzerdefinierte Formen
  • Enthält webkit-Präfix für eine breitere Browserunterstützung
  • Echtzeit-Vorschau mit anpassbarer Hintergrundfarbe

Common Use Cases

Bildmasken

Schneiden Sie Bilder in benutzerdefinierte Formen wie Kreise, Hexagone oder Sterne.

Abschnittstrenner

Erstellen Sie geneigte oder gekrümmte Abschnittsübergänge mit clip-path.

Kreative Layouts

Bauen Sie nicht-rechteckige Inhaltsbereiche für einzigartige Seitendesigns.

Profilfotos

Schneiden Sie Benutzer-Avatare in hexagonale oder abgerundete Formen.

Technical Guide

Die CSS-Eigenschaft clip-path akzeptiert mehrere Formfunktionen: polygon() definiert eine Form mithilfe von Koordinatenpaaren als Prozentsätze oder Längen. circle() erstellt einen kreisförmigen Beschneidevorgang mit Radius und Mittelpunkt. ellipse() erstellt eine ovale Form mit horizontalen und vertikalen Radien. inset() erstellt eine rechteckige Beschneidung mit optionaler Border-Radiuseinstellung. Die polygon-Funktion akzeptiert beliebig viele x-y-Koordinatenpaare, was sie zur flexibelsten macht. Koordinaten sind relativ zum Element - 0% 0% ist die obere linke Ecke und 100% 100% ist die untere rechte Ecke. Für Animationen kann clip-path übergegangen werden, wenn dieselbe Formfunktion mit der gleichen Anzahl von Punkten verwendet wird. Die Browserunterstützung ist in modernen Browsern gut, aber das -webkit-Präfix wird für Safari empfohlen. Clip-path beeinflusst nicht das Layout - das Element behält seine ursprünglichen Box-Model-Dimensionen bei.

Tips & Best Practices

  • 1
    Beginnen Sie mit einer Vorlage und passen Sie die Werte für benutzerdefinierte Formen an
  • 2
    Verwenden Sie die gleiche Anzahl von Punkten für Polygone, um animierbare Übergänge zu ermöglichen
  • 3
    Kombinieren Sie mit CSS-Übergängen für Aufdeck- und Morph-Effekte
  • 4
    Clip-path funktioniert großartig auf Bildern und Hintergrundelementen

Related Tools

CSS-Dreieck-Generator - free online tool

CSS-Dreieck-Generator

Erstellen Sie CSS-Dreiecke mit der Border-Technik und steuern Sie Richtung und Farbe.

🎨 CSS & Design
CSS-Blob-Generator - free online tool

CSS-Blob-Generator

Erstellen Sie organische Blob-Formen als SVG mit Farbverläufen und Zufälligkeit.

🎨 CSS & Design
CSS-Wellengenerator - free online tool

CSS-Wellengenerator

Erstellen Sie SVG-Wellensektorentrenner mit anpassbaren Wellen, Höhe und Farben.

🎨 CSS & Design
CSS-Trenner-Generator - free online tool

CSS-Trenner-Generator

Erstellen Sie CSS-Abschnittstrenner mit mehreren Stilen, einschließlich Gradient, Schatten und Zickzack.

🎨 CSS & Design

Frequently Asked Questions

Q Beeinflusst clip-path das Elementlayout?
Nein, das Element behält sein vollständiges Box-Modell. Nur die sichtbare Darstellung wird durch den Clip beeinflusst.
Q Kann ich clip-path animieren?
Ja, clip-path unterstützt CSS-Übergänge, wenn die gleiche Funktion und Anzahl von Punkten in beiden Zuständen verwendet werden.
Q Wird clip-path in allen Browsern unterstützt?
Moderne Browser unterstützen clip-path. Das -webkit-Präfix stellt sicher, dass Safari kompatibel ist. IE unterstützt clip-path nicht.
Q Kann ich Text mit clip-path schneiden?
Ja, clip-path funktioniert auf jedem HTML-Element, einschließlich Textcontainern. Verwenden Sie -webkit-background-clip: text für eine textspezifische Beschneidung.
Q Was ist der Unterschied zwischen clip-path und mask?
Clip-path verwendet Formfunktionen für scharfe Kantenbeschneidung. CSS-Masken verwenden Bilder oder Farbverläufe und unterstützen weiche Kanten und partielle Transparenz.

About This Tool

CSS-Clip-Path-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.