CSS clip-path Generator (Polygon, Circle, Inset)

CSS clip-path masks an element to any shape — circle, polygon, custom. Useful for hero section decorations, avatar shapes, image masking. This visual builder lets you pick a shape, drag vertices for polygons, and copy the CSS.

How to use the CSS clip-path Generator (Polygon, Circle, Inset)

Pick a shape from the dropdown. Edit numbers; the preview updates live. For polygons, type vertices as comma-separated x% y% pairs, or pick a preset.