✂️ CSS Clip Path Generator

Visually create CSS clip-path polygon shapes by dragging points with preset shapes.

Generated CSS (click to copy)

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

About CSS Clip Path Generator

Drag the control points to shape the clip-path polygon. Click preset buttons for common shapes.

What is clip-path?

clip-path is a CSS property that defines a clipping region using percentage-based coordinates.

Browser support?

clip-path: polygon() is supported in all modern browsers.