Clip-Path Editor

Carve any element into a custom shape — drag polygon handles on a live preview, start from 16 ready-made shapes, add or remove points, and clip your own image. Export the clip-path as CSS or Tailwind.

Editor

Drag the handles to reshape. Click a handle to select, then remove it — or add one on the longest edge.

Shapes

Clip an imagePreview the mask on your own image instead of a gradient.

Export

A clip-path polygon — works on any element, image or video.

.clip {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}