clip
The clip CSS property sets the visible area of an absolutely positioned element.
Overview
The clip CSS property sets the visible area of an absolutely positioned element.
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 |
| Other | ||||||
css.types.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 |
| CSS type | ||||||
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.
Related links
Powered by web-features