Opacity

You might say

This image is stealing too much attention. Make it a little transparent.

Make an element and its contents more transparentOpacity changes the transparency of an entire element, including its children. It can soften secondary or disabled content, but low opacity also reduces text contrast. Use a transparent color when only the background should fade.

100%50%15%

When to use it

Soften a disabled visual state
Fade an element during a transition
Create a subtle overlay
Reduce the emphasis of decorative content

When NOT to use it

Lower body-text contrast until it is hard to read
Use opacity when only the background should change
Hide content visually while leaving an unexpected click target
Use transparency as the only sign that a control is disabled

Anatomy

opacity: 0.45Background shines through

something seen through

If opacity is less than 1, the overall color becomes lighter.

The lower the transparency, the more the background shows through

Variants

0.4

Disable

Unclickable buttons and input boxes

0.8

hover

Secondary icons are usually lighter

0.5

Mask

Darken the page behind the pop-up window

Use placeholder when doing fade-in animation

Typical use cases

Disabled state

opacity: 0.4 = disabled Email

Fade transition

Design specification.md ✎ ⧉ ★

The secondary icon usually has an opacity of 0.45, and the hovered one returns to 1

Overlay

Mask rgba(.32), the background is vaguely visible

✓ Saved

Decorative image

Copied link → Copied link → Copied link transition: opacity .2s, fade in