clip-path
clip-path constrains the visible region of an element to a custom shape. It enables non-rectangular visual effects without image editing.
Overview
clip-path constrains the visible region of an element to a custom shape. It enables non-rectangular visual effects without image editing.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 55 | 79 | 3.5 | 9.1 | 55 | 9.3 | |
| DOM API | ||||||
| The SVGClipPathElement interface provides access to the properties of clipPath elements, as well as methods to manipulate them. | 1 | 12 | 1.5 | 3 | 18 | 1 |
| The read-only clipPathUnits property of the SVGClipPathElement interface reflects the clipPathUnits attribute of a clipPath element which defines the coordinate system to use for the content of the element. | 1 | 12 | 1.5 | 3 | 18 | 1 |
| The read-only transform property of the SVGClipPathElement interface reflects the transform attribute of a clipPath element, that is a list of transformations applied to the element. | 1 | 12 | 1.5 | 3 | 18 | 1 |
| CSS property | ||||||
basic shape `<basic-shape>` | 23 | 79 | 54 | 7 | 25 | 7 |
html elements On HTML elements | 23 | 79 | 3.5 | 7 | 25 | 7 |
path `path()` | 88 | 88 | 71 | 13.1 | 88 | 13 |
svg elements On SVG elements | 23 | 12 | 52 | 7 | 25 | 7 |
| Other | ||||||
| The SVG element defines a clipping path, to be used by the clip-path property. | 1 | 12 | 1.5 | 3 | 18 | 3 |
svg.elements.clipPath.clipPathUnits | 1 | 12 | 1.5 | 3 | 18 | 3 |
| The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences. | 1 | 12 | 12 | 3 | 18 | 3 |
| The clip-path presentation attribute defines or associates a clipping path with the element it is related to. | 23 | 12 | 52 | 7 | 25 | 7 |
- Available with a vendor prefix: -webkit- (23)
- This browser only partially implements this feature
- This feature was removed in a later browser version (79)
- Only supports clip paths defined by `url()`.
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (25)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (10)
- Available with a vendor prefix: -webkit- (10)
Syntax
.hexagon {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.circle-crop {
clip-path: circle(50% at center);
}
.reveal {
clip-path: inset(0 100% 0 0);
transition: clip-path 0.5s ease;
}
.reveal:hover {
clip-path: inset(0 0 0 0);
}Live demo
Use cases
Decorative masks
Create angled cards, badges, or shaped hero elements without extra assets.
Reveal effects
Clip visual layers for transitions or spotlight-style effects in presentation-heavy UI.
Cautions
- Clipping can hide focus rings or important content if the shape is too aggressive.
- Complex shapes may increase rendering cost and complicate maintenance.
Accessibility
- Avoid clipping text or interactive areas in ways that make focus states, labels, or hit targets unclear.
Related links
Powered by web-features