Opacity
Control the opacity of elements.
On this page
Opacity
The opacity property sets the opacity level for an element. The opacity level describes the semantic transparency level, where opaque is not transparent at all, emphasis to weaker are various levels of transparency, and transparent is completely transparent.
Common
Set the opacity of an element using .opacity-{value} utilities.
<div class="opacity-opaque">...</div>
<div class="opacity-strong">...</div>
<div class="opacity-medium">...</div>
<div class="opacity-weak">...</div>
<div class="opacity-weaker">...</div>
<div class="opacity-invisible">...</div>
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
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.
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
<div class="opacity-0">...</div>
Disabled
Set an image or a svg to disabled easily thanks to .opacity-disabled.
<svg class="bi opacity-disabled text-brand-primary" aria-hidden="true">
<use xlink:href="/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty" />
</svg>