clip
The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
clip Deprecated | 1 | 12 | 1 | 1 | 18 | 1 |
auto Deprecated | 1 | 79 | 1 | 1 | 18 | 1 |
| CSS type | ||||||
shape Deprecated The CSS data type defines the specific form (shape) of a region. The region represents the part of an element to which the clip property applies. | 1 | 12 | 1 | 1.3 | 18 | 1 |
rect Deprecated `rect()` | 1 | 12 | 1 | 1.3 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`.
Notes 1 item(s)
Implementation note
- Safari on iOS incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`.
Syntax
CSS
.visually-hidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
}Live demo
Use cases
-
Decorative enhancement
Use clip to add depth, masking, blending, or special treatment to supporting visuals.
-
Brand expression
Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.
Cautions
- Heavy effects can hurt performance or readability on lower-end devices.
- Do not use visual effects as the only way to communicate meaning or state.
Accessibility
- Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
- Visual polish should never reduce content legibility.