CSS Clip Path Generator
Draw editable polygon clip paths with draggable points, keyboard controls, and circle, ellipse, or inset shapes.
Interactive clip-path studio
Drag polygon points or use precise coordinates. Explore circles, ellipses, and rounded insets.
3–16 points. Drag a handle or focus it and use arrow keys (Shift for 10% steps). Crossing edges can create cutouts.
The dashed square shows the original element bounds.
Export & saved snippets
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}How to Use CSS Clip Path Generator
Choose a polygon preset or switch to circle, ellipse, or rounded inset.
Drag polygon handles, use arrow keys, or enter precise coordinates.
Insert or remove polygon points and undo changes as needed.
Copy, download, or save the resulting clip-path CSS.
Frequently Asked Questions
Is clip-path supported by all modern browsers?
Yes, clip-path is widely supported across all modern web browsers.
Related Developer Tools
Explore more free client-side developer utilities in this category