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%.


Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn UI and UX Design on Codecademy