Clip Path Generator
Cut elements into shapes — pick a preset polygon and drag its points, or use circle, ellipse and inset.
Drag the points on the preview to reshape the polygon.
How the Clip Path Generator Works
Build clip-path shapes visually with preset polygons and draggable points, then copy responsive percent-based CSS.
Preset Library
Twelve polygon presets — triangles, arrows, stars, message bubbles — plus circle, ellipse and inset basic shapes. Start close to the shape you need.
Draggable Points
Every polygon vertex is a handle on the live preview. Drag to reshape, add midpoints for detail, remove points you don't need — the CSS updates as you move.
Ghost Preview
The clipped-away area stays visible as a faint ghost, so you always see what the shape is cutting from the original element.
Percent-Based Output
All coordinates are percentages, so the same clip-path scales with any element size — hero images, cards, or full-bleed sections.
Frequently Asked Questions
clip-path defines a visible region of an element — everything outside the shape is hidden. It works on any element including images and video, and participates in hit-testing: clicks outside the shape pass through.
Percent coordinates are relative to the element's box, so one value works at every size and stays responsive. Pixel coordinates would break as soon as the element resizes.
Yes — transitions between two polygons with the same number of points animate smoothly and run on the compositor in modern browsers. It powers reveal effects and morphing shapes.
clip-path is a hard-edged vector shape; mask-image supports soft alpha gradients and images. For crisp geometric cuts clip-path is simpler and cheaper.