Design tokens

Opacity

Opacity tokens set the opacity (or transparency) of an item in increments of 10%.

Opacity tokens

Token Example Value
0
0
10
0.1
20
0.2
30
0.3
40
0.4
50
0.5
60
0.6
70
0.7
80
0.8
90
0.9
100
1

Using opacity tokens

Your context and coding style determine how you access USWDS opacity tokens in code.

Context Usage Example
function opacity(opacity) opacity: opacity(10)
mixin u-opacity(opacity) @include u-opacity(10)
setting opacity $theme-hover-opacity: 50
utility .opacity-opacity .opacity-50