CSS opacity Property
The opacity property sets the opacity level of an element (including its children).
Description & Usage
The opacity property controls the visual transparency of an entire element and all of its descendants.
Values range from 0.0 (completely invisible) to 1.0 (completely opaque). Note that opacity affects child elements as well; to make only a background transparent, use rgba() colors instead.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Visual |
| Initial Value | 1 |
| Inherited | No (not inherited) |
| Applies To | All elements |
Syntax
opacity: 1 | 0.85 | 0.5 | 0;Property Values
| Value | Description |
|---|---|
| 1 | Fully opaque (no transparency). |
| 0.5 | 50% semi-transparent. |
| 0 | Fully invisible (still occupies layout space). |
Code Examples
Hover Fade Effect
.button {
opacity: 0.9;
transition: opacity 0.2s ease;
}
.button:hover {
opacity: 1;
}
Fades button to full opacity on hover.