CSS Clip Path Generator

Use overflow: hidden with border-radius when you only need rounded rectangles, it is cheaper and works everywhere. Reach for clip-path when the shape is not a rounded box: diagonal section dividers, arrows, hexagon avatars, or shapes you want to morph with a transition. One caution: clip-path clips painting only, the clipped element still occupies its full rectangular space in the layout.

polygon(x1 y1, x2 y2, …): arbitrary shape from 3+ points. circle(r at cx cy): circular clip with radius and center. ellipse(rx ry at cx cy): oval clip. inset(top right bottom left round radius): rectangle clipped from each side with optional corner radius. path(“M …”): SVG path syntax for curves and arcs.

Each point is “x%, y%” where (0%, 0%) is top-left and (100%, 100%) is bottom-right. Points are connected in order to form the polygon, then the shape auto-closes back to the first point. Outside the polygon = clipped.

Clips a rectangle from each side. inset(20%) trims 20% from all sides. inset(0 20% 0 0) trims only the right 20%. The optional round parameter applies border-radius to the clipped rectangle – useful for rounded card masks.

SVG path syntax for shapes that polygon can’t easily express – curves (Q/C commands), arcs (A command), or imported SVG paths. Coordinates are absolute (no percentage), assumes 100×100 viewBox. For complex hand-drawn shapes, easier to design in Figma/Illustrator and export SVG path data.

The output includes -webkit-clip-path for Safari pre-14 and older WebKit browsers. For Chrome / Firefox / Edge / Safari 14+, the unprefixed property is enough. Including both is harmless and ensures wider compatibility.

Yes – same function with same point/argument count interpolates smoothly. polygon → polygon animates if both have the same number of points. circle → circle always works. polygon → circle? No – different function types can’t morph (you’d need a polygon approximating a circle).

Elements ARE still clickable in the clipped region by default (clip-path is visual only – the element’s actual bounds still capture events). To restrict events to the visible shape, also apply pointer-events: none on the clipped area, or use shape-outside on a sibling – but neither is fully solved without scripting.

Yes – divs, images, videos, buttons, iframes. Note that scrollable content inside a clip-path may visually clip but still scroll; consider overflow: hidden on parents.

No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.