Tools

Clip-Path & Masks

Cut an element down to any shape with clip-path: circles, polygons, arrows, speech bubbles. Pick a shape, see it live, copy the CSS. Nothing uploaded.

Show image behind (to see the cut)

CSS

About clip-path

The clip-path property hides everything outside a shape you define: a circle, an ellipse, or a polygon() of points in percentages. The element keeps its box for layout, but only the clipped region paints, so you can make non-rectangular cards, diagonal section dividers, hover reveals and arrows without a single image.

Because the shape is just CSS, it animates and stays razor-sharp at any size. For soft-edged or gradient-based cuts, reach for mask-image instead; for the frosted look, the glassmorphism generator covers backdrop-filter.