Clip-path generator
Drag points to shape a CSS clip-path and copy the code.
Runs in this tab. The file stays here.
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
This runs in your browser. Nothing is uploaded.
About Clip-path generator
Click and drag points to shape a CSS clip-path polygon, then copy the declaration. The preview runs in your browser.
clip-path cuts an element down to a shape, and a polygon is the version where you list the corners. Typing percentage pairs by hand and refreshing the page is slow, so here you get a square box with draggable dots and a coloured block next to it that is clipped live. Click empty space in the box to add a point, drag a point to move it, and double-click a point to delete it. Six presets (triangle, trapezoid, pentagon, hexagon, arrow, and star) are there for a start, and Reset puts the pentagon back.
The output is one line, clip-path: polygon(...), with every coordinate as a percentage of the element, rounded to a tenth. Percentages mean the shape scales with the box it's applied to. New points are added at the end of the list, so a point you click lands between the last and first corners and can tangle the outline; drag it into place or start again from a preset. At least three points are needed, and you can't delete below three. The numbered list under the presets shows each point's coordinates.
It only writes polygons. There's no circle(), ellipse(), inset(), or path(), and nothing here handles curves. For rounded corners use the border-radius page, and for smooth organic shapes use the SVG blob page. Polygons can be animated or transitioned between shapes as long as both have the same number of points, which is worth planning for if you want a morph.
How to use Clip-path generator
- 1Start from a preset, or from the pentagon.
- 2Click the box to add a point, drag points to move them, double-click one to remove it.
- 3Watch the clipped block on the right.
- 4Copy the clip-path declaration.
What it won't do
- Polygons only; no circle, ellipse, inset or path.
- Minimum three points; new points are appended to the end of the list.
- Output is percentages rounded to 0.1.
Common questions
Can I animate between two shapes?
Only if both polygons have the same number of points. Build the simpler shape with extra points stacked on its edges, and transition between the two clip-path values.
Can I make a circle or an ellipse?
Not here. This page only produces polygon(). CSS has circle() and ellipse() functions, and border-radius is usually simpler for a plain circle.
Why do the percentages look odd?
They're rounded to one decimal place, and they're measured against the box the clip is applied to, with 0% 0% at the top-left corner. If your element isn't the same shape as the preview, the polygon stretches with it.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation