clip-path maker — CSS shape clipping
Pick a shape and get the CSS clip-path to cut an element into it. It generates entirely in your browser (0 uploads, works offline).
How to use it
- Choose a shape.
- Preview the clipped element.
- Copy the clip-path CSS.
FAQ
How do I create a CSS clip-path for free?
Choose a shape — triangle, hexagon, star, chevron and more — and this page gives you the matching clip-path polygon, previewed on a live element, on your device with no upload.
What can I clip with it?
Any element: images, cards, section dividers. The polygon is expressed in percentages, so it scales with the element's size.
Is anything uploaded?
No. The CSS is generated entirely in your browser and nothing is transmitted or stored, which you can verify by turning off your Wi-Fi.
Do clip-paths work in all browsers?
Polygon clip-paths are widely supported in modern browsers. Provide a sensible fallback for very old browsers that ignore the property.
Limits
Offers a set of preset polygons; freehand point editing is not included in this version.
Related
The border-radius blob maker makes organic shapes; the SVG-to-React tool wraps icons.
Bookmark this page (Ctrl+D, or ⌘D on Mac) or install the app — it works offline the next time you need it.