Tools · CSS · Clip-path generator
Clip-path generator
Build a CSS clip-path shape - polygon, circle, ellipse, or inset - with a live preview, and copy the code.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
How it works
Pick a shape type (polygon, circle, ellipse, or inset), or a polygon preset.
Drag the points on the preview, or use the sliders, to refine the shape.
Copy the generated clip-path CSS.
Frequently asked questions
No. The shape is generated and rendered entirely in your browser - this is just math and CSS text.
Yes. Open Point coordinates and use Add a point - it splits the longest edge - or the Remove button on any row. A polygon keeps at least three points.
Some combinations - like an inset that covers the whole box - are valid CSS that clips everything away. Not a bug, just a degenerate but legal value.
Yes. Tab to a point and use the arrow keys to nudge it - Shift for a bigger step.
Guides
A closer look at specific problems this tool solves.
Why Shape Elements With CSS clip-path Instead of Cropped Images
A hexagon avatar or an angled hero can be baked into the image file, or cut by the browser at render time. clip-path does the cutting in CSS, which keeps one source image and one line to change, with a few side effects worth knowing first.
Read the guideHow to Build a CSS clip-path Polygon by Dragging Points
Start from one of eight presets, drag the points into place, add or remove points as the shape needs, and copy a polygon() value that scales with any box. Here is the process, with the limits the tool actually has.
Read the guideMaking a Hexagon Profile Photo With CSS clip-path
A hexagon avatar looks like one line of CSS, then the hexagon comes out squashed, the border vanishes on four sides and the shadow is gone. Here is the whole job, including the three fixes.
Read the guide
Comments