Pick a polygon, circle, ellipse or inset, drag the points on a live preview and copy the clip-path rule.
To make a CSS clip-path, pick a shape, drag its dots on the preview and copy the clip-path line: for the Triangle preset it is clip-path: polygon(50% 0%, 0% 100%, 100% 100%); and it cuts an element down to a triangle. Every number is a percentage of the element's own box, measured from its top-left corner, so the same rule fits a small icon and a full-width banner. A polygon lists points as x y pairs separated by commas; the shape is the area they enclose, and the page lets you use 3 to 20 points inside the box. The clipped-away part is not drawn, but the element still takes up its full box in the layout. The page opens with a hexagon: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%).
Polygon has 13 presets (triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, cross, chevron, arrow, message, close). Use Add point to split the longest edge and Remove last point to take one away. Circle is written circle(40% at 50% 50%): a radius, then the centre; drag the centre dot to move it and the radius dot to resize it. Ellipse is ellipse(45% 30% at 50% 50%) with a horizontal and a vertical radius, each with its own dot. Inset cuts the box in from each side and is written like margin shorthand: inset(10%) is 10 percent on all four sides, inset(10% 20%) is top and bottom 10 and left and right 20. Add round 15% for rounded corners, as in the Rounded preset inset(10% round 15%). Press an arrow key on a focused dot to move it 1 percent, or Shift and an arrow to move it 10.
The preview box is square by default. Under Exact values and options you can switch it to 4:3 or 16:9 to match your element. This matters for a circle: CSS measures its radius against the box's diagonal length divided by the square root of 2, which equals the width only for a square, so on a 16:9 box circle(40%) is about 81 percent as wide as 40 percent of the width. The handles follow that rule. To animate from one polygon to another, both need the same number of points in the same order, so use Add point on the simpler one until the counts match. Turn on Also write -webkit-clip-path to add the prefixed line that older Safari versions read.
The generator writes percentages only. It does not write lengths in pixels, the closest-side and farthest-side keywords, fill-rule evenodd, path(), url() references to SVG clip paths, or a reference box such as border-box. Points stay inside 0 to 100 percent, and values are rounded to one decimal place. It shows the shape on a gradient, not on your own image or element, so check the final look in your page. The shape is built in your browser and nothing is uploaded; only the shape type, the preview box and the prefix choice are remembered, not your points.
Choose Polygon, Circle, Ellipse or Inset, drag the dots until the preview looks right and press Copy CSS. Paste the line into the rule of the element you want to cut, for example .badge { clip-path: circle(40% at 50% 50%); }.
Click the Triangle preset for polygon(50% 0%, 0% 100%, 100% 100%) or the Hexagon preset for polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%). Each pair is the x and y of one corner, in percent of the element.
The first number of each pair is how far from the left edge, the second how far from the top edge, both as a share of the element's width and height. 0% 0% is the top-left corner and 100% 100% is the bottom-right. A point at 50% 0% sits halfway along the top edge.
A circle radius is a percentage of the box's diagonal divided by the square root of 2, not of its width. On a 16:9 box, 40% is about 32 percent of the width. Switch the preview box to 16:9 under Exact values and options to see the dot where your element will draw it.
Yes, if both use the same shape function, and for polygons the same number of points in the same order. A triangle has 3 points and a rhombus 4, so add a point to the triangle first. Circles, ellipses and insets animate by their numbers.
No. The shape is built in your browser, in this tab, and nothing is sent to a server. Your choice of shape type, preview box and prefix is saved in this browser; the points are not.