Create polygon, circle, ellipse, and inset clip-path shapes visually. Use shape presets, click to add polygon points, edit coordinates, and copy CSS clip-path code instantly.
More free utilities you might find useful
Quick answers to common questions
clip-path defines the visible area of an element — everything outside is hidden. Creates non-rectangular shapes: triangles, hexagons, stars, diagonals. Unlike border-radius, supports any polygon.
Pointing up: clip-path: polygon(50% 0%, 0% 100%, 100% 100%); Right: polygon(0 0, 100% 50%, 0 100%); Down: polygon(0 0, 100% 0, 50% 100%).
Yes — when both states use the same shape type with the same number of points. transition: clip-path 0.3s ease works for hover effects.
Your data is processed entirely in your browser. Nothing is sent to any server.
Shape Type
Presets
Live Preview (click to add point)
Points (3)
CSS Output
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);