CSS Clip Path Generator
Create CSS clip-path shapes visually with live preview. Support for circle, ellipse, inset, and polygon shapes with presets. Copy the CSS code. Free online tool.
50%
50%
50%
Reference
What is CSS clip-path?
The clip-path CSS property creates a clipping region that defines which part of an element should be shown. Parts inside the region are visible; parts outside are hidden.
Clip-path shapes
circle() creates a circular clip. ellipse() creates an elliptical clip. inset() creates a rectangular clip with optional rounded corners. polygon() creates a custom shape defined by a series of coordinate points.
Privacy
All clip-path generation runs 100% in your browser. No data is sent to any server.