clip-path Generator

polygon() vs shape()

clip-path crops an element to a shape. The classic basic shapes, polygon(), circle(), ellipse() and inset(), are supported everywhere and are what most projects use today. polygon() takes a list of points, so you can carve any straight-edged outline.

The newer shape() function is a superset that reads like SVG path commands (line to, curve to, arc) and, unlike the SVG-based path(), accepts percentages and mixed units, so it scales with the element and can be animated between states. For a straight-edged polygon the two are equivalent; this tool gives you both so you can adopt shape() where it is supported and keep polygon() as the safe default.

Your image never leaves the page

Uploading an image just previews the clip on something real. The file is read into the browser with a local object URL and is never sent anywhere.