Opacity

Published Jun 8, 2022Updated Apr 16, 2023
Contribute to Docs

Opacity correlates to transparency or the amount of light that passes through an object. An object with high opacity has low transparency, meaning little or no light can pass through.

If an object is completely opaque like a solid wood door, no light can pass through, and anything behind the door will not be visible. In contrast, a partially opaque object, like a window covered by a thin curtain, allows light to pass through and objects behind the window will be somewhat visible.

In design software, the fill typically defaults to 100% opacity. As the opacity is lowered, the layer will become more transparent and any colors or shapes behind the layer will become visible.

Four sets of overlapping purple squares on a white background. The first set of squares has 100% opacity, and the opacity decreases for each set: 75%, 50%, and then 25%.

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy