Clip Path Shapes

Create CSS clip-path shapes visually — circles, ellipses, polygons and stars with live preview.

Shape: Size: 70%

clip-path: …

How to use

Pick a shape, tweak its size, preview it live and copy the clip-path CSS.

Which shapes are included?

Circle, ellipse, triangle, diamond, pentagon, hexagon, star and custom insets.

Does it output the CSS?

The exact clip-path declaration is generated for copy-paste.

☕

Every tool runs 100% in your browser — no uploads, no signups. If a tool saved you time, consider supporting us with a small donation.