CSS clip-path generator
Build CSS clip-path values visually: add, remove and edit polygon vertices numerically, plus circle, ellipse, inset and path shapes with a live gradient preview and presets for triangle, diamond, hexagon, star, arrow and speech bubble.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Live preview
The preview block uses a gradient background; the dashed box is the original bounds.
CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
What this tool does
- Build slanted banners, hexagon avatars or odd-shaped cards without computing vertices by hand — drag a point or type a number and the CSS updates live.
- Start from a preset such as star, arrow or speech bubble and nudge a few percentages instead of measuring coordinates in a design tool.
- Circle, ellipse and inset are covered too: inset takes all four offsets plus a corner radius in one declaration, which beats hand-writing the paddings.
- For complex outlines switch to path mode, paste the SVG path data your design tool exported, and the tool wraps it into a valid CSS declaration.
Example
Input
Shape polygon with vertices 50% 0%, 100% 100%, 0% 100% (the built-in triangle preset)
Output
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Vertices are stored as percentages where 0% is the left/top edge and 100% the right/bottom edge, independent of the element size, and values are rounded to two decimals.
Frequently asked questions
Why can I not delete down to two vertices?
A polygon needs at least three vertices to enclose an area; with fewer the browser ignores the whole clip-path. The remove button therefore stops working at three vertices, and no invalid CSS is produced.
What happens if I type a value outside 0–100?
It is clamped back into 0–100 so a negative or oversized percentage cannot clip the element away entirely. Values are rounded to two decimals as well, keeping one-third-style results free of floating point tails.
How is clip-path different from border-radius?
border-radius only rounds the corners of the box, while borders, shadows and hit testing still follow the rectangle. clip-path actually removes the visible area and pointer events follow the clipped shape. For plain rounded rectangles prefer border-radius.
What units do the path coordinates use?
path() uses pixel values in the element’s own coordinate system with the origin at the top-left corner, so percentages are not available there. A missing close command (Z) or empty data raises an error, so export the path completely first.
Can I paste the generated CSS straight into my stylesheet?
Yes, it is a standard CSS declaration. Very old browsers such as IE do not support clip-path, so if you must support them add the -webkit-clip-path prefix or fall back to a plain rectangle.
Keywords：clip-pathclip path裁剪多边形polygoncss 形状insetpath生成器generator