About the Clip Path Generator
clip-path lets you crop an element to any shape without an image mask or an extra wrapper, and the shape stays responsive because the coordinates are percentages. It is how angled section dividers, hexagon avatar grids and chevron progress steps are usually built today.
How to use the Clip Path Generator
- Pick a starting shape — polygon, circle, ellipse or inset.
- Edit the coordinate values to fine-tune it.
- Load one of your own images to see the shape applied to real content.
- Copy the CSS into your stylesheet.
Why use this tool?
Twelve ready shapes
Triangle, rhombus, pentagon, hexagon, star, speech bubble, arrow, chevron, angled band and more.
Preview on your image
Load a photo from your device and confirm the crop before shipping it.
Editable coordinates
The raw clip-path value stays editable, so you can nudge a single point rather than starting over.
Frequently asked questions
Is clip-path supported everywhere?
Basic shapes and polygons work in all current browsers. Reserve path() and complex SVG references for cases where you can accept a fallback.
Can I animate a clip-path?
Yes, between polygons with the same number of points. Mismatched point counts cannot interpolate and will snap instead of morph.
Does clipped content still respond to clicks?
No. The clipped-away area is not hit-testable, which is usually what you want, but remember it if a button sits near the edge.