UIUX 360 / 28-September-2022 / minute read

Opacity

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.

Written by: Prince Pal Singh

Your UI/UX Designer. Consultant. Partner. Over the past 18 years, I designed websites and apps for enterprise-level clients like Stanford-HCI Research, Accenture, Juniper Networks, Gemalto, Virtual Dental Care & much more.

G

H

J

K

M

N

O

Q

V

W

X

X-Height

Y

Yerkes-Dodson Law

Z

What is Opacity?

Overview

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.