CSS Clip Path Generator

Sculpt a shape directly on the canvas. Drag polygon points, explore rounded shapes, and export CSS or an SVG.

Live preview

Drag a point. Arrow keys move it; Shift moves by 10%. Delete removes it.

clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);

Everything stays in your browser.

Format references

MDN — clip-path

Tool page updated: 2026-10-24