opacity
The opacity property sets the transparency of an entire element and its contents.
Syntax
opacity: <number 0..1 | %>;
Examples
.disabled { opacity: 0.5; }
.fade { opacity: 0; transition: opacity 0.2s; }
.fade.show { opacity: 1; }
Output
Renders a half-transparent disabled element and a block that fades in when the .show class is added.
Notes
opacity affects the whole element and its children together and creates a new stacking context. To make only a background translucent, use an rgb()/oklch() color with an alpha channel instead.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |