clip-path is a CSS property that clips an element to a shape — polygon, circle, ellipse and more. This free generator lets you build the clip-path value by dragging and copy it instantly. No signup, no watermark, free for commercial use.
clip-path clips the visible area of an element to a shape. You can use basic shapes like polygon(), circle(), ellipse() and inset() to mask images, cut diagonal sections, speech bubbles, arrows, stripes and checkerboards — with pure CSS and no image editing.
clip-path and -webkit-clip-path, then paste it onto your element.| Function | Use | Example |
|---|---|---|
polygon() |
Triangles, hexagons, arrows and any custom polygon | polygon(50% 0, 0 100%, 100% 100%) |
circle() |
Crop to a circle (avatars, icons) | circle(50% at 50% 50%) |
ellipse() |
Wide or tall ellipses | ellipse(50% 35% at 50% 50%) |
inset() |
Inset rectangle (with optional rounding) | inset(10% round 12px) |
-webkit-clip-path (this tool adds it automatically).polygon shapes smoothly, keep the same number of points.box-shadow. To keep a shadow, use filter: drop-shadow() on the parent.Yes. It is completely free with no signup and no watermark. The generated code is yours to use commercially.
Adding it is safer for older Safari and Chrome. This tool outputs both clip-path and -webkit-clip-path automatically.
Yes. Double-click the preview to add a point on the nearest edge, and double-click a point to remove it (minimum 3).
Yes. Two polygon shapes with the same number of points transition smoothly. Enable “Animate on hover” to output the transition and hover code.
clip-path works in Chrome, Safari, Edge and Firefox. The basic shapes (polygon/circle/ellipse/inset) are widely supported.