Clip-path Property
Last updated: 2026-09-13
clip-path Clip-path Property
The clip-path property clips an element into a specified geometric shape — such as a circle, polygon, or ellipse — showing only the part inside the shape and hiding everything outside. Unlike the traditional rectangular clipping of overflow: hidden, clip-path creates visible areas of any shape, making it a powerful tool for creative layouts and visual effects.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
clip-path: none | <clip-source> | <basic-shape> | <geometry-box>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No clipping |
<clip-source> | <basic-shape> | <geometry-box> | Value | The clipping path |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| clip-path | ✓ v55 | ✓ v79 | ✓ v3.5 | ✓ v9.1 | ✓ v42 |
| Supported in all major browsers | |||||
Tip： polygon() is the most flexible clipping function and can define any polygon; online generators such as Clippy produce the coordinates quickly.
Warning： clip-path clips both the element's content and its interactive area; the clipped-off parts cannot respond to mouse events.
❓ FAQ
QWhat is the difference between clip-path and mask properties in CSS?
Aclip-path is a hard clip: only the region inside the clipping path is kept, everything outside is fully invisible and unresponsive to events, with a hard edge. mask is an alpha-based mask that supports semi-transparent gradients, so you can achieve soft, fading edges. Use clip-path for geometric shapes and mask when you want smooth transitions using images or gradients.
QCan the clip-path property be animated with CSS transitions or keyframes?
AYes, under two conditions: the functions of the two states are of the same type and have the same number of vertices — for example, two polygon() calls with four vertices each, or a circle() transitioning into a larger circle(). These support transition and animation. If the vertex counts differ (say, triangle to pentagon), interpolation is impossible; you first need to pad both to the same count.
QHow do I clip an element into a circle or polygon, and how do the coordinates work?
Acircle(50%) makes a circle, and you can add at to set the center, like circle(50% at 30% 40%). polygon() defines vertices with percentage coordinates — polygon(50% 0%, 100% 100%, 0% 100%) is a triangle — and all coordinates are relative to the element's own width and height. Use a visual tool like Clippy to drag out the coordinates and then fine-tune them.
QDoes clip-path affect the mouse click and hit-test area of an element?
AYes. The region clipped away is not only invisible but also unresponsive to mouse events — the element's hit-test area follows the clipped shape. You can use this to precisely control the clickable region, but it also means the clipped parts cannot host interactive elements. If you only want to hide the visuals while keeping the click area, use mask or visibility instead.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
