Clip-Path Generator

clip-path cuts an element down to a shape — a hexagon avatar, an angled section divider, an arrow, a speech bubble — without changing its layout box. The area outside the shape becomes transparent, so whatever's behind shows through. It works on images, divs, videos, and more.

Yes. The polygon points and circle/ellipse radii use percentages, so the shape scales with the element at any size. That's the advantage over cropping an image — one CSS rule adapts to any width and height without a separate asset.

Yes, in all modern browsers. Older Safari versions need the -webkit-clip-path prefix, which this tool includes alongside the standard property. Browsers that don't support it simply show the full, unclipped element, so it degrades gracefully.