Generators

CSS Clip-Path Maker

Design geometric clip-paths visually and copy clean CSS for your layouts.

Pick a shape or drag the handles. Copy the clip-path rule instantly — all math runs in your browser, unrestricted.

Nothing uploaded · calculated on your device

Drag the handles on the preview to reshape the polygon.

CSS

clip-path: polygon(50% 2%, 62.9% 32.2%, 95.7% 35.2%, 70.9% 56.8%, 78.2% 88.8%, 50% 72%, 21.8% 88.8%, 29.1% 56.8%, 4.3% 35.2%, 37.1% 32.2%);