How to use it
- Type a Class name for the rule, such as triangle, and choose a Shape.
- For a polygon, drag a point on the Preview, or type its x and y in the fields. Use Add point and Remove last point to change the count.
- For inset, circle or ellipse, type the numbers in the fields. The preview redraws at once.
- Copy the CSS rule into your stylesheet and put the class on the element you want to cut.
The four shapes
The CSS Shapes Module defines the basic shapes that clip-path takes. A polygon is a list of points, each a pair of positions, and the points are joined in the order you list them. An inset cuts the box at four distances, given as top, right, bottom and left. A circle or an ellipse has a radius, or two radii, and a centre written after the word at.
- polygon(50% 0%, 100% 100%, 0% 100%) has three points, each with an x and a y in percent.
- inset(10% 20% 10% 20%) cuts 10% from the top and bottom and 20% from the left and right.
- circle(60px at 50% 50%) has a radius of 60 px and its centre in the middle of the box.
Percentages and the reference box
A percentage in a point, an inset or a centre is a share of the box, and the spec resolves it against the used size of the reference box. The CSS Masking Module says that when no reference box is given, the border box is used. Parts of the element outside the shape are not drawn.
What the tool does not write
- A fill rule for a polygon, the round clause of an inset, and the url() or path() forms of clip-path.
- A percentage radius for a circle or an ellipse. The shapes text this tool read does not say how it resolves, so the radii are in px.
Worked example: a triangle
A triangle is a polygon with three points: the top centre, the bottom right and the bottom left of the box. The table gives each point, and the rule the tool writes is .triangle with clip-path set to polygon(50% 0%, 100% 100%, 0% 100%).
| Point | x | y |
|---|---|---|
| 1 | 50% | 0% |
| 2 | 100% | 100% |
| 3 | 0% | 100% |
Frequently asked questions
Why are the radii of a circle or an ellipse in pixels?
The shapes text does not say how a percentage radius is resolved for circle() and ellipse(), so the tool offers pixels only. A radius in pixels has one meaning, and the preview draws it at the size the box has on your screen.
Why does the shape disappear when I type a wrong value?
The tool shows the reason in red and draws no shape, so that it never gives you a rule that is wrong. A value outside its range, or insets that leave no part of the box, are the usual causes.
Does the order of the points matter?
Yes. The points are written in the order you list them, and that order draws the outline. Moving a point changes the shape without changing the others.
How is clip-path different from border-radius?
clip-path cuts the element to a shape, so the part outside is not drawn, while border-radius only rounds the corners. The reference box of clip-path is the border box unless another one is given.
How many points can a polygon have here?
From 3 to 20. More points give a finer outline but a longer rule, and the preview works with up to 20 handles.
Is the CSS I make sent anywhere?
No. The preview and the rule are made in your browser. Nothing is stored or sent to our server, so copy the CSS before you leave the page.
Sources
- W3C: CSS Shapes Module Level 1, basic shapes
- W3C: CSS Masking Module Level 1, the clip-path property
Figures and text last checked on Thursday, November 12, 2026.