CSS Clip-Path Generator
Generate CSS clip-path shapes visually — pick a polygon, circle, ellipse or inset, drag the vertices, and copy the clip-path code. 100% in your browser.
Percentage coordinates land on the ratio, so judge the shape at the ratio it will be used at.
Drag the handles on the preview, or edit the coordinates below.
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
🔒 Generated in your browser — nothing is uploaded.
Cut any element into a shape with CSS clip-path
Choose a ready-made shape — triangle, hexagon, star, pentagon, trapezoid and more — or a circle(), ellipse() or inset(), then fine-tune it. For polygons you can drag each vertex right on the preview or type exact x% y% coordinates, add and remove points, and build a fully custom shape. The tool writes the matching clip-path (with the -webkit- prefix) so you can paste it straight into your CSS.
A live preview shows the shape clipped over a gradient or checkerboard fill, with a faint outline of the full box so you can see exactly what is being cut away. Everything runs in your browser — nothing is uploaded and there is no sign-up.
Frequently asked questions
What is clip-path used for?
clip-path crops an element to a shape, hiding everything outside it. It is used for angled section dividers, hexagon avatars, image masks, badges and reveal animations — all with pure CSS and no image editor.
Why does the copied CSS include -webkit-clip-path?
Some older WebKit/Safari versions only recognize the prefixed property. Including both -webkit-clip-path and the standard clip-path with the same value maximizes browser support at no cost.
Can I make a custom shape?
Yes. Pick 'Custom' (or start from any preset), then drag the handles on the preview or edit the x/y percentages, and add or remove points to draw any polygon you need. A polygon needs at least three points to render.
What do the percentages mean?
Coordinates are percentages of the element's own box: 0% 0% is the top-left corner and 100% 100% is the bottom-right. The shape scales with the element, so it stays correct at any size.
Is anything I make uploaded?
No. The clip-path CSS is generated entirely in your browser and nothing is sent to a server.