Opacity

Bootstrap 5 Opacity

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%
75%
50%
25%
Edit in sandbox 
        
            
        <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.

Edit in sandbox 
        
            
    'opacity': (
        property: opacity,
        values: (
          0: 0,
          5: 0.05,
          10: 0.1,
          15: 0.15,
          20: 0.2,
          25: 0.25,
          30: 0.3,
          35: 0.35,
          40: 0.4,
          45: 0.45,
          50: 0.5,
          55: 0.55,
          60: 0.6,
          65: 0.65,
          70: 0.7,
          75: 0.75,
          80: 0.8,
          85: 0.85,
          90: 0.9,
          95: 0.95,
          100: 1,
        ),