CSS Clip Path Generator

Pick a preset shape, drag its points to customize, and copy the CSS.

CSS

About this tool

clip-path cuts an element to a polygon shape without affecting layout. Pick a preset, drag the white handle points to customize, and copy the live-updating CSS.

Browser support

clip-path with polygon() works in all modern browsers with no vendor prefix — common for image crops, section dividers, badges and hover effects.