CSS Generator
Clip Path Generator
Drag polygon vertices, switch between clip-path functions, and copy CSS or Tailwind arbitrary values.
clip-path
Editable Shape
Vertex editor
6 points
Controls
Output
Copy-ready CSS
Pure CSS
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);Tailwind v4
[clip-path:polygon(25%_0%\,_75%_0%\,_100%_50%\,_75%_100%\,_25%_100%\,_0%_50%)]Presets
Popular Clip Path Presets
Pick a geometric shape, then drag the points into a custom CSS cut.
Triangle Classic
Triangle Classic is clean geometric clipping for CSS clip-path layouts.
Hexagon Soft
Hexagon Soft is a safer crop with less aggressive corners for CSS clip-path layouts.
Octagon Banner
Octagon Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.
Pentagon Sharp
Pentagon Sharp is a dramatic decorative silhouette for CSS clip-path layouts.
Star Classic
Star Classic is clean geometric clipping for CSS clip-path layouts.
Arrow Right Banner
Arrow Right Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.
Arrow Left Divider
Arrow Left Divider is an edge-forward crop for page dividers for CSS clip-path layouts.
Parallelogram Banner
Parallelogram Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.
Trapezoid Divider
Trapezoid Divider is an edge-forward crop for page dividers for CSS clip-path layouts.
Message Bubble Classic
Message Bubble Classic is clean geometric clipping for CSS clip-path layouts.
Star Compact
Star Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.
Hexagon Sharp
Hexagon Sharp is a dramatic decorative silhouette for CSS clip-path layouts.
More tools