Clip Path Generator

Drag points to reshape · double-click a point to remove it · double-click empty space to add one

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

CSSSASSSCSS

Edit

Shape Type

Polygon

Preset Shape

1XY

2XY

3XY

Preview Background Image

Drop image here to replace the preview background

What is a Clip Path Generator?

Clip Path lets you crop an element into a custom shape entirely with CSS — circles, ellipses, insets, and freeform polygons. Drag points directly on the preview to reshape a polygon, key in exact X/Y coordinates, and export clean CSS, SASS, or SCSS ready to drop into your project.