CSS Clip Path Generator
Polygon, circle, ellipse and inset clip-paths with draggable points.
Drag the numbered points, or focus one and use the arrow keys (Shift for steps of 10).
Use via API
Build a CSS clip-path: polygon from points, circle, ellipse or inset, or a named preset shape (triangle, hexagon, star, arrows…). All values are percentages. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/clip-path-generator
curl https://pithlab.com/api/v1/tools/clip-path-generator \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"shape":"polygon","points":"50 0, 100 100, 0 100"}'About the Clip Path Generator
Make CSS clip-path shapes: start from triangles, hexagons, stars, arrows and more, drag the points or type exact values, and copy the clip-path CSS.
How to use the Clip Path Generator
- Pick a shape: polygons such as triangle, hexagon, star, arrow and chevron, or a circle, ellipse or inset rectangle.
- Drag the numbered points on the preview, or focus a point and nudge it with the arrow keys.
- Type exact percentages in the point list, and add or remove points to make your own polygon.
- Copy the clip-path CSS and apply it to any element.
Examples
Input
50 0, 100 100, 0 100
Output
clip-path: polygon(50% 0, 100% 100%, 0 100%);
Input
25 0, 75 0, 100 50, 75 100, 25 100, 0 50
Output
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
Input
circle: radius 50, centre 50 50
Output
clip-path: circle(50% at 50% 50%);
Input
inset: 10 10 10 10, round 8
Output
clip-path: inset(10% round 8%);
Frequently asked questions
How do clip-path polygon coordinates work?
Each point is an x and y position, usually in percentages of the element's width and height, measured from the top-left corner. polygon(50% 0, 100% 100%, 0 100%) joins the top middle, bottom right and bottom left into a triangle.
Does clip-path affect layout or clicks?
It doesn't change the element's size or layout; it only hides what is outside the shape. Clicks and hover only register on the visible part.
Can I animate clip-path?
Yes. Transitions and animations work between two shapes of the same type, and for polygons both must have the same number of points. Add points to the simpler shape to morph between them.
Why don't box-shadow and borders show on a clipped element?
They are drawn as part of the element, so they are clipped too. Use filter: drop-shadow() on a parent element, or a slightly larger clipped element behind it, to fake a border or shadow.