Frontend

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%

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