Create CSS clip-path shapes visually — click to add polygon points, drag to adjust, or pick from presets like circle, triangle, hexagon and arrow. Copy the clip-path CSS instantly.
The CSS clip-path property masks an element to a defined shape — everything outside the path becomes invisible. The polygon() function takes a list of x/y coordinate pairs in percentage or length values. circle() and ellipse() are shorthand for simple shapes. Unlike border-radius, clip-path does not affect the element's layout box — it still occupies its original space. Clipped elements can be animated by interpolating between two polygon() values with the same number of points, enabling smooth shape morphing with CSS transitions or animations.