CSS Clip-Path Editor

clip-path clips an element to a shape — only the area inside the shape is visible. It supports circles, ellipses, polygons, and SVG paths. Unlike overflow: hidden (rectangular only), clip-path creates any shape: triangles, stars, custom curves, and organic forms.

Yes — clip-path is animatable between shapes with the same number of points. For example, morph a square polygon(0 0, 100% 0, 100% 100%, 0 100%) to a diamond polygon(50% 0, 100% 50%, 50% 100%, 0 50%). Different point counts won't interpolate smoothly — add invisible points to match.

clip-path uses geometric shapes for hard edges. CSS mask uses images (including gradients) for soft edges, transparency, and complex patterns. Use clip-path for clean geometric shapes, mask for gradient fades, texture effects, or when you need alpha transparency.

Yes — by default, only the visible (clipped) area is clickable. The clipped-out area doesn't receive pointer events. You can override this with pointer-events: all on the element, but this may cause unexpected behavior. Plan your interactive areas around the clip shape.