Opacity

Controls element transparency to express visual hierarchy in overlays and state changes.

Opacity Scale

A complete opacity scale from 0% to 100%

10%

15%

20%

25%

30%

35%

40%

45%

50%

55%

60%

65%

70%

75%

80%

85%

90%

95%

100%

Adjust the slider to see the opacity effect in real time

50%

0%50%100%

opacityproperty vs. color alpha value — what's the difference?

opacity: 0.5

Parent element (50%)

Child also at 50%

✗ Affects child elements too

color-mix()

Parent element (50%)

Child remains at 100%

✓ Background only is transparent