CSS Opacity
The opacity property controls how transparent an element is. The value is a number between 0 and 1, where 0 is fully transparent and 1 is fully opaque.
Opacity Values
Opacity values range from 0 to 1. This allows smooth transitions, transparent layers, and visual effects.
| Value | Effect |
|---|---|
| 1 | Fully opaque |
| 0.5 | 50% transparency |
| 0 | Fully transparent |
Basic Examples of Opacity
In the following example, three boxes have different opacity values: 1, 0.5, and 0.
The first box is fully opaque, the second is semi-transparent, and the third is invisible.
Opacity for Hover Effects
Opacity is often used in hover effects. For example, an element may appear faint by default but become fully visible when hovered.
Tips for Using Opacity
Opacity can be combined with many other CSS properties. Here are some suggestions:
- Use it for overlay layers, for example a darkened background in modal windows.
- Combine with transition to create smooth fading effects.
- Remember that opacity also affects all children of the element.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
