Generated CSS
The CSS clip-path property defines a clipping region on any HTML element — only the parts inside the region are visible, everything outside is hidden. It is one of the most powerful layout and design properties in modern CSS, enabling non-rectangular shapes, creative image crops, animated reveals and complex UI effects.
Use the interactive editor above to create any clip-path shape visually. Upload your own image to preview the clip on real content, then copy the generated CSS directly into your project.
polygon() — Accepts any number of x y coordinate pairs. Triangle (3 pts), star (10 pts), any custom shape.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Triangle */ clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Hexagon */
circle() — Clips to a circle with optional center position.
clip-path: circle(50%); /* Full circle */ clip-path: circle(40% at 30% 30%); /* Offset circle */
ellipse() — Circle with independent x and y radii.
clip-path: ellipse(55% 35% at 50% 50%); /* Wide oval */
inset() — Rectangle with optional rounded corners.
clip-path: inset(10% round 20px); /* Rounded inset */ clip-path: inset(5% 15% 5% 15%); /* Different sides */
clip-path is fully animatable. Both states must use the same shape function with the same number of points.
.element { clip-path: inset(0 100% 0 0); transition: clip-path 0.5s ease; }
.element:hover { clip-path: inset(0 0% 0 0); } /* Wipe reveal */
Angled hero sections — clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)
Circular profile photos — clip-path: circle(50%) on any <img>
Scroll reveal — Start with inset(0 0 100% 0), animate to inset(0 0 0% 0) on scroll
Hexagonal image grids — Apply hexagon polygon to image tiles for a honeycomb layout
clip-path is GPU-accelerated in all modern browsers. For frequently animated elements use will-change: clip-path.
| Function | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| polygon() | 55+ | 54+ | 9.1+ | 79+ |
| circle() | 55+ | 54+ | 9.1+ | 79+ |
| ellipse() | 55+ | 54+ | 9.1+ | 79+ |
| inset() | 55+ | 54+ | 9.1+ | 79+ |
| path() | 88+ | 97+ | 14.1+ | 88+ |
Use clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). The six coordinate pairs trace each corner of the hexagon, starting top-left and moving clockwise. Click the Hexagon preset above to load it instantly.
clip-path uses geometric shapes (polygon, circle, ellipse, inset, path) and produces a hard, pixel-perfect edge — anything outside is fully hidden. mask uses an image or gradient as an alpha channel, which means it can produce soft, semi-transparent edges. Use clip-path for shapes; use mask for fades and image-based effects.
Three common causes: (1) the element has no width or height — clip-path needs a box to clip; (2) percentage values are relative to the element's size, so a child smaller than expected will produce a tiny clip; (3) overflow is hidden on a parent and your clip extends outside. Also check that all polygon points are inside the 0% – 100% range.
Yes — but only between shapes with the same number of points. To animate from a triangle (3 points) to a square (4 points), define the triangle as a 4-point polygon with two coincident points. Add transition: clip-path 0.4s ease and change the polygon on hover or with a class. See our clip-path animations guide for production-ready examples.
Yes. clip-path applies to any element including ones with background-image. The clipped region affects the element's entire visible area — background, borders, content. To clip only the image and not the surrounding box, use the mask property or apply the clip to a child <img> instead.
Apply clip-path directly to the <img> element. Click the Star or Speech Bubble preset above, copy the generated CSS, and paste the polygon onto your image's selector. The image will retain its aspect ratio inside the clipped shape.
Want deeper examples with animation code and real layouts? Read the complete CSS clip-path guide →