?? opacity in CSS

The opacity property controls the transparency level of an element — how see-through it is.

Syntax

selector {  opacity: value;}

• value ranges from 0 (fully transparent) to 1 (fully opaque).

• Can use decimal values like 0.5 for 50% transparency.

Example

.box {  opacity: 0.7; /* 70% visible, 30% transparent */}

Notes

• opacity affects the entire element, including text and children.

• Partially transparent elements still respond to events like clicks.

• To make only background transparent but keep text fully visible, use rgba() colors or background-color: rgba() instead.

Example with rgba()

.box {  background-color: rgba(0, 0, 0, 0.5); /* Black background at 50% opacity */  color: white; /* Text fully opaque */}

Want examples of fading effects or transitions using opacity?