Opacity
Control the opacity of elements.
On this page
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.
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>
CSS
Sass tokens
Raw tokens
Opacity raw tokens as Sass variables. Not to be used as-is.
$ouds-opacity-0: 0;
$ouds-opacity-40: .04;
// $ouds-opacity-80: .08;
// $ouds-opacity-120: .12;
$ouds-opacity-160: .16;
// $ouds-opacity-200: .2;
// $ouds-opacity-240: .24;
// $ouds-opacity-280: .28;
$ouds-opacity-320: .32;
// $ouds-opacity-360: .36;
// $ouds-opacity-400: .4;
// $ouds-opacity-440: .44;
// $ouds-opacity-480: .48;
// $ouds-opacity-520: .52;
// $ouds-opacity-560: .56;
// $ouds-opacity-600: .6;
$ouds-opacity-640: .64;
// $ouds-opacity-680: .68;
// $ouds-opacity-720: .72;
// $ouds-opacity-760: .76;
// $ouds-opacity-800: .8;
// $ouds-opacity-880: .88;
// $ouds-opacity-920: .92;
// $ouds-opacity-960: .96;
$ouds-opacity-1000: 1;
Semantic tokens
Opacity semantic tokens are defined as Sass variables.
$ouds-opacity-invisible: $ouds-opacity-0;
$ouds-opacity-medium: $ouds-opacity-320;
$ouds-opacity-opaque: $ouds-opacity-1000;
$ouds-opacity-strong: $ouds-opacity-640;
$ouds-opacity-weak: $ouds-opacity-160;
$ouds-opacity-weaker: $ouds-opacity-40;
Sass maps
The opacity utilities are declared through this map and generated using our utilities API.
$ouds-opacities: (
"invisible": $ouds-opacity-invisible,
"weaker": $ouds-opacity-weaker,
"weak": $ouds-opacity-weak,
"medium": $ouds-opacity-medium,
"strong": $ouds-opacity-strong,
"opaque": $ouds-opacity-opaque
);
Sass utilities API
Opacity utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"opacity-ouds": (
property: opacity,
values: $ouds-opacities
),Bootstrap $enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
),
bootstrap-compatibility: true
),