CSS Clip Path Generator
Build a CSS clip-path shape visually - common practical shapes with editable points - with a live preview.
Choose a starting shape and adjust its points - the preview updates live and the clip-path CSS is ready to copy.
Clip-path visually crops an element - the underlying content and layout size are unchanged, only what's visible changes.
What Does clip-path Do?
The clip-path property crops an element to a specified shape - only the part of the element inside that shape remains visible, everything outside it is hidden.
Why Use This Tool?
Hand-writing polygon() coordinate lists is tedious and hard to visualize - adjusting points with a live preview is far more direct than guessing percentages.
How to Use It
- Choose a starting shape (triangle, polygon, circle, or ellipse).
- Adjust the shape's points or radius.
- Copy the generated clip-path CSS value.
Limitations
This covers the common basic shape functions (polygon(), circle(), ellipse(), inset()) - clipping to an SVG path() or a URL reference isn't generated here.