opacity
opacity controls the transparency of an element and all of its descendants. It is useful for layering, disabled states, and subtle emphasis changes.
Overview
opacity controls the transparency of an element and all of its descendants. It is useful for layering, disabled states, and subtle emphasis changes.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 2 | 18 | 1 | |
percentages Support for percentage opacity values | 78 | 79 | 70 | 13.1 | 78 | 13.4 |
| Other | ||||||
| The CSS data type represents a number, being either an integer, a number with a fractional component, or a base-ten exponent in scientific notation. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS type | ||||||
scientific notation Scientific notation | 43 | 12 | 29 | 10.1 | 43 | 10.3 |
| Other | ||||||
| The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid. | 1 | 12 | 1 | 2 | 18 | 1 |
- This feature was removed in a later browser version (3.5)
- Available with a vendor prefix: -moz- (1)
- This feature was removed in a later browser version (2)
- Available with a vendor prefix: -khtml- (1.1)
- This feature was removed in a later browser version (3.5)
- Available with a vendor prefix: -moz- (1)
- This feature was removed in a later browser version (2)
- Available with a vendor prefix: -khtml- (1.1)
Syntax
/* Semi-transparent */
.overlay {
opacity: 0.5;
}
/* Fade-in animation */
.fade-in {
opacity: 0;
transition: opacity 0.3s ease;
}
.fade-in.visible {
opacity: 1;
}
/* Disabled state */
.disabled {
opacity: 0.4;
pointer-events: none;
}Live demo
Use cases
De-emphasized elements
Reduce the visual weight of secondary content, overlays, or background layers.
Disabled-like states
Support disabled or inactive styling as one cue among several.
Cautions
- Lowering opacity affects all descendants, including text, which can easily harm contrast.
- Very low-opacity states can make content look broken or hidden instead of intentionally inactive.
Accessibility
- If opacity suggests disabled state, pair it with semantics and other visible cues rather than color/transparency alone.
Related links
Powered by web-features