Utilities - Opacity

Opacity

Control the opacity of elements.

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

Set the opacity of an element using .o-{value} utilities.

100%
80%
50%
20%
0%
<div class="o-100">100%</div>
<div class="o-80">80%</div>
<div class="o-50">50%</div>
<div class="o-20">20%</div>
<div class="o-0">0%</div>
Class Properties
o-0 opacity: 0;
o-10 opacity: .1;
o-20 opacity: .2;
o-30 opacity: .3;
o-40 opacity: .4;
o-50 opacity: .5;
o-60 opacity: .6;
o-70 opacity: .7;
o-80 opacity: .8;
o-90 opacity: .9;
o-100 opacity: 1;