Source

Opacity

Control the opacity of elements.

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

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

100%

75%

fifty%

25%

<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>

Utilities API

Opacity utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "opacity": (
      property: opacity,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      )
    ),