Opacity

Opacity measures how much a layer or UI element blocks the content behind it, expressed as a percentage from 0% (fully transparent) to 100% (fully opaque). It is the complement of transparency: 70% opacity equals 30% transparency.

Opacity and alpha channels are related but operate at different levels:

• Opacity: Applied uniformly to an entire layer or element. Examples include Photoshop's layer opacity slider and CSS opacity
• Alpha channel: Controls transparency per-pixel, embedded directly in image data

CSS provides two approaches to transparency:

• opacity: 0.5 - Makes the entire element (including children) semi-transparent. Text and child elements become translucent together
• background-color: rgba(0, 0, 0, 0.5) - Only the background becomes semi-transparent while text remains fully opaque

In image editors, reducing layer opacity blends it with layers below. Applications include double-exposure effects in photography and semi-transparent colour overlays behind text.

The opacity property is used for fade-in and fade-out transitions, combined with transition or @keyframes.