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.
Preview
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.
Masking elements to any shape
The clip-path property clips an element to a shape, hiding everything outside it. With polygon() you list vertices as percentage coordinates to cut diamonds, hexagons, stars, arrows, and angled section dividers; circle(), ellipse(), and inset() handle rounded and rectangular masks. Writing vertex lists by hand is tedious and error-prone, so a visual builder is the practical way in.
Pick a shape or a preset and edit the values with a live preview, then copy the clip-path. For simple rounded corners a clip path is overkill — the border-radius generator is the right tool — and for soft, organic blob shapes the SVG blob generator produces smoother curves than a polygon can.
Common use cases
- Angled sections — cut a diagonal edge on a hero or banner.
- Geometric avatars — mask an image to a hexagon or diamond.
- Decorative shapes — clip elements into stars, arrows, or badges.
- Image reveals — animate a clip-path to wipe content into view.
- Speech bubbles — build a pointer with a custom polygon.