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 .opacity-{value} utilities.
100%
90%
80%
75%
70%
60%
50%
40%
30%
25%
20%
10%
0%
<div class="sg-example d-sm-flex">
<div class="opacity-100 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">100%</div>
<div class="opacity-90 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">90%</div>
<div class="opacity-80 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">80%</div>
<div class="opacity-75 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">75%</div>
<div class="opacity-70 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">70%</div>
<div class="opacity-60 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">60%</div>
<div class="opacity-50 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">50%</div>
<div class="opacity-40 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">40%</div>
<div class="opacity-30 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">30%</div>
<div class="opacity-25 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">25%</div>
<div class="opacity-20 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">20%</div>
<div class="opacity-10 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">10%</div>
<div class="opacity-0 p-15 m-5 wui-bg-color--highlight wui-color--white text-bold">0%</div>
</div>
