Home / Design / Clip Path Generator
Clip Path Generator
Pick a shape, drag its points to reshape it and copy the CSS clip-path.
Drag the white handles to reshape. Double-click the shape to add a point; double-click a handle to remove it.
What clip-path does: it cuts an element — an image, a card, a section background — to a shape, hiding everything outside it. Points are percentages of the element’s box, so the shape scales with the element. Clip-path doesn’t change layout, so text around a clipped element won’t wrap to the shape (use shape-outside for that).
About the Clip Path Generator
The CSS Clip Path Generator cuts elements into custom shapes. Start from a triangle, star, arrow or other shape, drag the handles to reshape it, double-click to add or remove points and preview it over your own image, then copy the clip-path polygon. It is great for creative image crops, section dividers and badges.
How to use the Clip Path Generator
- Pick a starting shape.
- Drag the handles to reshape it — double-click to add or remove points.
- Upload a preview image and turn on snapping if you like.
- Copy the clip-path CSS.
Frequently asked questions
What is CSS clip-path?
clip-path hides everything outside a shape you define, so an element or image appears as a triangle, star, hexagon or any polygon.
Do clip-path shapes work in all browsers?
Yes. clip-path with polygon() is supported in all modern browsers.
Does clip-path affect clicks?
Yes. Only the visible part of the element responds to clicks and hovers.