CSS Clip-path Generator

Create CSS clip-path shapes — triangles, polygons, stars, arrows, circles — with a live preview.

How do I make a shape with CSS clip-path?

The CSS clip-path property cuts an element to a shape, hiding everything outside it. polygon() takes a list of x y points in percentages (a triangle is polygon(50% 0%, 0% 100%, 100% 100%)), while circle(), ellipse() and inset() create round and rectangular clips.

Ideas

Slanted or wavy section dividers for landing pages without extra images.
Hexagon or circle avatars — apply clip-path directly to an <img>.
Stars and badges for ratings and "new" labels.
Animated reveals: transition between two polygons with the same number of points.

Choose Regular polygon for any number of sides (3–40) and set the rotation; choose Star to set the number of points and the inner radius.

Frequently asked questions

Is clip-path supported in all browsers?

Yes, basic shapes and polygon() work in all current browsers.

Does clip-path affect clicks?

Yes — clicks only register inside the visible clipped area.

Can I add a border to a clipped shape?

Not directly; wrap it in a slightly larger clipped element with the border colour, or use an SVG.