Opacity / Alpha

Definition

Opacity is a value that describes how much an element shows through. When something is fully opaque, whatever sits behind it is completely hidden. When it's fully transparent, the element seems to vanish and the background shows straight through. In between those two extremes, the element becomes semi-transparent, and its color blends with the background layered underneath. This is often called alpha. By adjusting it, you can show states like overlap, overlay, or disabled without deleting or redrawing anything. What sets opacity apart from other color properties is that you aren't changing the color itself — you're changing how much the element is present.

Why does it matter?

Opacity matters because it's the simplest way to express layers between elements. When you open a modal and cover the page behind it with a semi-transparent black sheet, users instantly understand that the screen they were looking at has stepped back and their attention belongs on the window in front. Dim a disabled button and it reads as "you can't press this right now" without a single word of explanation. In this way opacity quietly signals an element's state and priority. It also helps in another common case: lay a translucent sheet over a busy photo and the text on top stays crisp and readable instead of getting lost in the image. But because it's so convenient, it's easy to overuse — so it's worth being clear about why you're making something show through before you reach for it.

Common mistakes

• Giving body text too much transparency. Making black text semi-transparent can look soft and polished, but it also drops the contrast against the background, which makes the text harder to read. On colored backgrounds the contrast collapses far more than you'd expect.
• Lowering the opacity of a whole element when you only meant to fade one part of it. Setting opacity on an element makes everything inside — the text, the shadow, every child element — fade along with it. If you only want the background to be semi-transparent, it's better to put an alpha value into the color itself.
• Making a scrim far too dark. If you dim the background behind a modal too heavily, the context of what you were working on disappears entirely, and users can lose their bearings and feel boxed in. A gentle dim that still lets the background peek through is usually enough to pull focus onto the front window.

Practical tips

• Use opacity for scrims that darken the background behind a modal, or for fading a disabled button. Just don't over-fade text — if you need muted text, it's safer to pick a gray with enough contrast built in from the start rather than making a solid color transparent.
• When you use a semi-transparent color, check the final result on top of the actual background it will sit over. A translucent gray that looked fine on white can turn into a completely different color on a dark background.
• When you split layers with opacity, manage the stacking order alongside it. The translucent effect only stacks the way you intended once it's clear which element sits on top.

Related concepts