CSS Clip-Path Generator
Build CSS clip-path polygon, circle and ellipse shapes visually with a drag-and-drop editor. Copy the ready-to-use CSS code instantly. Free, browser-based.
💻 Developer Tools
Free
Browser-based
Drag the handles to reshape. Click on the canvas to add a point (polygon only).
clip-path: polygon(...);
What Is CSS clip-path?
The clip-path CSS property clips an element to a defined shape — anything outside the shape is hidden. It is commonly used to create hero sections with diagonal cuts, polygon-shaped image frames, and creative button shapes without needing SVG or image masks.
clip-path Shape Types
| Function | Description |
|---|---|
polygon() | Any shape defined by a list of x/y percentage points |
circle(r at cx cy) | Circle with radius and centre position |
ellipse(rx ry at cx cy) | Ellipse with x/y radii and centre |
inset(t r b l round r) | Inset rectangle with optional rounded corners |
path() | SVG path string (Chrome/Edge only) |
Browser Support
clip-path with polygon(), circle() and ellipse() is supported in all modern browsers. Older WebKit browsers may require the -webkit-clip-path prefix — simply duplicate the property with the prefix as a fallback.