What the clip-path generator does
clip-path cuts an element into a shape — anything outside the shape is hidden, and pointer events follow the visible area. This generator gives you preset shapes (circle, ellipse, triangle, pentagon, hexagon, star) and a custom polygon mode where you set the points, with a live preview and the CSS ready to copy. It is how you get angled section dividers, hexagonal avatars, diagonal image crops and reveal animations without editing the image itself. Runs in your browser.
The syntax
clip-path: circle(50% at 50% 50%);
clip-path: ellipse(50% 35% at 50% 50%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* triangle */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* hexagon */
clip-path: inset(10% 20% 10% 20% round 12px); /* rectangle with margins */Polygon points are listed as x y pairs, in order around the shape, in percentages of the element's box (or px). The shape is filled between the points in sequence; the last point connects back to the first. Percentages make the shape scale with the element, which is almost always what you want.
Common shapes
| Shape | polygon() points |
|---|---|
| Triangle (up) | 50% 0%, 100% 100%, 0% 100% |
| Right-angled corner cut | 0 0, 100% 0, 100% 80%, 80% 100%, 0 100% |
| Diagonal section (bottom) | 0 0, 100% 0, 100% 85%, 0 100% |
| Parallelogram | 20% 0%, 100% 0%, 80% 100%, 0% 100% |
| Hexagon | 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% |
| Pentagon | 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38% |
| Star | 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% |
| Chevron / arrow | 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0% |
Where clip-path is used
- Angled section dividers — a hero section with a diagonal bottom edge, without an image or an SVG.
- Shaped images and avatars — hexagonal profile pictures, circular crops on images that are not square.
- Reveal animations — transition
clip-pathfrominset(0 100% 0 0)toinset(0)to wipe content in; fromcircle(0%)tocircle(150%)for a radial reveal. - Hover effects — a card that grows a corner cut on hover.
- Masking overflow creatively where
overflow: hiddenonly gives rectangles.
Animating clip-path
Shapes of the same function and the same number of points animate smoothly: two polygons with six points each, or two circles. A polygon cannot morph into a circle, and polygons with different point counts jump instead of morphing — add duplicate points to the simpler shape so the counts match. Animating clip-path is handled by the compositor in modern browsers, so it is cheap; still, prefer it on a few elements rather than a whole list.
.reveal { clip-path: inset(0 100% 0 0); transition: clip-path .6s ease; }
.reveal.in { clip-path: inset(0 0 0 0); }Things to know
- Clipping hides the box shadow and outline too — put the shadow on a wrapper or use
filter: drop-shadow()on the parent. - Text and interactive elements outside the shape are invisible and unclickable; make sure buttons stay inside.
- For shapes with curves other than circle and ellipse, use
clip-path: path("…")with SVG path syntax, or reference an SVG<clipPath>by URL. - Support is universal in current browsers for the basic shape functions;
path()arrived later (Firefox 97, Safari 13.1, Chrome 88).