In print, opacity is a physical property of ink and paper — a limitation to work around. In digital design, it is a tool with precision control. The 0–100% opacity scale gives designers a dimension of visual expression that has no direct equivalent in the physical world: the ability to make objects simultaneously present and transparent, to layer content in ways that suggest both depth and relationship.
Opacity carries semantic weight in interface design. A button at 40% opacity communicates unavailability — the interaction is present but suspended. An overlay at 50% opacity communicates context shift — the content behind is still acknowledged, still there, but no longer the focus. A tooltip at 90% opacity communicates proximity and impermanence. These are not arbitrary choices; they are a visual grammar that users learn to read.
The technical distinction between opacity and alpha matters more than most designers realise. CSS opacity applies to an element and all its descendants — a button at 50% opacity makes its label 50% transparent too. RGBA colour values apply alpha to the colour only, leaving child elements unaffected. This distinction determines which tool to reach for: use opacity for fade animations and disabled states; use RGBA for surface overlays and semi-transparent backgrounds.