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.

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.