Opacity
React Opacity - Bootstrap 5 & Material Design 2.0
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.
import React from 'react'; export default function App() { return ( <> <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, 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, ),