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.

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>

<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>

CSSLink to this section: CSS

Sass tokensLink to this section: Sass tokens

Semantic tokensLink to this section: Semantic tokens

Opacity semantic tokens are defined as Sass variables.

$ouds-opacity-invisible: $core-ouds-opacity-0;
$ouds-opacity-medium: $core-ouds-opacity-320;
$ouds-opacity-opaque: $core-ouds-opacity-1000;
$ouds-opacity-strong: $core-ouds-opacity-640;
$ouds-opacity-weak: $core-ouds-opacity-160;
$ouds-opacity-weaker: $core-ouds-opacity-40;

Sass mapsLink to this section: 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 APILink to this section: 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
),

"opacity": (
  property: opacity,
  values: (
    0: 0,
    25: .25,
    50: .5,
    75: .75,
    100: 1,
  ),
  bootstrap-compatibility: true
),
// scss-docs-end utils-opacity
// scss-docs-start utils-opacity-ouds
"opacity-ouds": (
  property: opacity,
  values: $ouds-opacities
),