Opacity

Opacity describes how transparent or solid a color or object appears on the screen. At 0% opacity, an element becomes fully transparent, meaning it is invisible and lets everything behind it show through. At 100% opacity, the element is fully opaque and blocks whatever is behind it.

Designers often use opacity to control focus and create visual depth. For example, lowering the opacity of a background element makes the content in front of it stand out. A button might have 70% opacity in its normal state and switch to 100% when hovered over, signaling that it is active.

Opacity can also be used to create overlays. Adding a semi-transparent black layer (around 40–60% opacity) on top of a photo can make white text easier to read. Similarly, lowering the opacity of colored shapes can create new blended colors when stacked together.^[1]