Opacity

Sets the opacity of an element.

Classes
Class Properties
opacity-0 opacity: 0;
opacity-10 opacity: .1;
opacity-20 opacity: .2;
opacity-30 opacity: .3;
opacity-40 opacity: .4;
opacity-50 opacity: .5;
opacity-60 opacity: .6;
opacity-70 opacity: .7;
opacity-80 opacity: .8;
opacity-90 opacity: .9;
opacity-100 opacity: 1;
Examples
opacity-10
opacity-40
opacity-70
opacity-100

<div class="card flex align-items-center justify-content-center">
    <div class="opacity-10 flex align-items-center justify-content-center bg-blue-500 text-white p-3 m-3 shadow-1 font-bold">opacity-10</div>
    <div class="opacity-40 flex align-items-center justify-content-center bg-blue-500 text-white p-3 m-3 shadow-1 font-bold">opacity-40</div>
    <div class="opacity-70 flex align-items-center justify-content-center bg-blue-500 text-white p-3 m-3 shadow-1 font-bold">opacity-70</div>
    <div class="opacity-100 flex align-items-center justify-content-center bg-blue-500 text-white p-3 m-3 shadow-1 font-bold">opacity-100</div>
</div>