The CSS opacity Property is used to adjust the transparency of an element. It controls the level of opacity or see-through effect, allowing you to make elements partially or fully transparent.

Note: The opacity property accepts values between 0 (completely transparent) and 1 (completely opaque).

Syntax

.transparent-box {
  opacity: 0.7;
}

Features

• Transparency Control: opacity allows you to control how transparent or opaque an element is.
• Values Range: Values range from 0 (completely transparent) to 1 (completely opaque).
• Affects Child Elements: The opacity of an element affects not only the element itself but also its child elements.
• Use Cases: Useful for creating subtle background overlays, fade-in/fade-out effects, or making certain elements less prominent.