Opacity

Posted by: Prince Pal | Posted date: 28-September-2022

What is Opacity?

Overview

Opacity is the degree of transparency in a UI element. The lower the opacity is the more transparent an element will be. One can adjust the opacity for all types of content, from an individual object to a group, and to a whole layer.

Opacity is the degree to which the content behind an element is hidden, and is the opposite of transparency. An object with high opacity has low transparency, which means little or no light can pass through.

In the design system, the fill usually defaults to 100% opacity. As the opacity decreases, the layer will become more transparent and any color or shape behind the layer will be visible. Opacity and transparency are used in website design to create contrast and strengthen brand identity.