Opacity and Blur in UI design

What opacity does

Opacity refers to how transparent or translucent an element is. A fully opaque element draws the eye, while a more transparent element fades into the background.

Because of this, opacity can be used to attract attention to something or divert attention away from it.

Opacity as user feedback

Opacity can also be used to show that something has happened.

One example is a button that changes opacity after it has been clicked. That change can signal that the user’s action has been registered, without needing extra text or icons.

Using opacity carefully

Opacity needs to be handled with care because too much transparency can make text hard to read and important elements hard to see.

For text, it's best to avoid dropping opacity below 50–60%, but that depends on context.

What blur adds to a design

Blur can soften hard edges, create a sense of depth, focus attention on specific elements, and evoke certain emotions.

It can also help a foreground element stand out against a busy background or create a transition between different sections of a UI.

The frosted glass effect

The frosted glass effect, also known as glassmorphism, is commonly used in iOS designs.

It is created with blur, while allowing some color and shape information from the layer underneath to show through. This can maintain readability and hierarchy when applied effectively.

Limits of blur

Blur should not be used to hide important information. Its purpose is to add depth and focus rather than to confuse or mislead the user.

Combining opacity and blur

Opacity and blur can be used together to create more dynamic and engaging designs. Using them together establishes distinction, hierarchy, and focus, while practice helps designers apply these tools with precision.