clip
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Warning: Authors are encouraged to use the clip-path property instead.
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 |
| 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 |
- Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`.
- Safari on iOS incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`.
Syntax
.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.