clip-path Shape Maker

CSS clip-path crops an element to a shape without touching the underlying image — the browser simply hides everything outside the region you define. The property accepts four basic shape functions, and this editor covers all of them: polygon() for arbitrary straight-edged shapes, circle(), ellipse(), and inset() for rectangular crops with optional rounded corners. Instead of hand-typing coordinate lists, you drag handles on a live stage and the CSS updates as you move.

Polygon mode is the deepest: start from one of 14 presets (triangle through star, arrow, chevron, cross and frame), click any dashed edge to insert a new vertex exactly where you clicked, drag the dots, nudge a selected point with arrow keys (Shift jumps 5%), or type precise X/Y percentages. Flip horizontal, flip vertical and reset are one tap each. A ghost overlay shows the part of the element being clipped away, and you can preview the cut on a gradient, a checkerboard, or a photo you upload — which never leaves your browser.

The output panel always shows two lines, clip-path and -webkit-clip-path, ready to copy together. Because every coordinate is a percentage of the element's own box, the same rule scales with responsive layouts; the 1:1 and 16:9 stage toggle lets you edit at the aspect ratio your real element will have, so the shape lands exactly as designed.