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 inverse 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. Common applications include double-exposure effects in photography and semi-transparent colour overlays behind text for improved readability.

From a performance perspective, opacity changes are GPU-accelerated, making them ideal for animations compared to toggling visibility or display. This property is the foundation of fade-in and fade-out transitions across the web. Combined with transition or @keyframes, opacity animations achieve smooth 60fps rendering without triggering layout recalculations.