CSS Clip-Path Polygon Shape Generator
Switch between polygon, circle, ellipse, and inset shapes — every CSS clip-path function, not just polygons. Drag points to reshape, add or remove polygon points freely, and preview against your own image.
Drag any solid dot to reshape. Click a dot to select it (for removal). Click a small "+" dot on an edge to add a point exactly there.
How CSS clip-path polygons are defined
clip-path isn't only polygon() — circle(), ellipse(), and inset() are separate shape functions with their own syntax, each better suited to different shapes than forcing everything into a polygon. Polygons take a list of x% y% coordinate pairs and hide everything outside the shape they trace; circles and ellipses take a radius and a center position; inset trims each edge by a percentage, optionally with rounded corners.
A custom image mask CSS workflow
Upload your own image to preview the clip against real content instead of a placeholder gradient, then apply the generated clip-path to an <img>, a background-image div, or any element you want cropped — it works the same way regardless of what's inside.
Worked example: the default hexagon
The polygon editor opens on six points and writes:
.clipped-shape {
clip-path: polygon(25.0% 0.0%, 75.0% 0.0%, 100.0% 50.0%, 75.0% 100.0%, 25.0% 100.0%, 0.0% 50.0%);
}
Each pair is an x and y position as a percentage of the element's box, with 0% 0% at the top-left corner. The six points run clockwise from the top: 25% and 75% along the top edge, then the middle of the right edge, then 75% and 25% along the bottom edge, then the middle of the left edge. It's a hexagon only in the loose sense, and it's regular only when the element's aspect ratio is right, so adjust the points if you need it to look even on a non-square box.
Whatever is clipped away is also removed for pointer events, so clicks and hovers on the hidden corners won't register on the element.
The four basic shape functions
| Function | Syntax | Good for |
|---|---|---|
| polygon() | polygon(x y, x y, …) | Any straight-edged shape: hexagons, arrows, slanted edges. |
| circle() | circle(radius at x y) | Round avatars and spotlight reveals. |
| ellipse() | ellipse(rx ry at x y) | Oval masks. |
| inset() | inset(top right bottom left round r) | Rectangles with optional rounded corners, handy for reveal animations. |
Frequently asked questions
What's the difference between clip-path and border-radius?
border-radius only rounds rectangular corners. clip-path can cut an element into any polygon, circle, ellipse, or custom shape — it's a much more general tool for non-rectangular shapes, angled edges, or cut corners.
Does clip-path affect an element's clickable area?
Yes — anything clipped away is also removed from interaction, so a clipped button or link only responds to clicks within the visible clipped shape, not the original rectangular box. This is worth testing if the element is interactive.
Why does my clipped image look different on hover or resize?
Percentage-based clip-path polygon points are relative to the element's own box, so if the element's size changes (on hover, or via a responsive layout), the clip shape recalculates against the new dimensions and can shift.
Can I animate a clip-path shape?
Yes, but both the starting and ending polygon() values need the same number of points for the browser to interpolate between them smoothly — mismatched point counts will make the animation jump rather than morph.
