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-emphasis">...</div>
<div class="opacity-medium">...</div>
<div class="opacity-weak">...</div>
<div class="opacity-weaker">...</div>
<div class="opacity-transparent">...</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>

CSS

Sass tokens

Opacity tokens as Sass variables.

$ouds-opacity-0:   0;
$ouds-opacity-100: .04;
// $ouds-opacity-200: .08;
$ouds-opacity-300: .16;
// $ouds-opacity-400: .24;
$ouds-opacity-500: .32;
// $ouds-opacity-600: .48;
$ouds-opacity-700: .64;
// $ouds-opacity-800: .80;
$ouds-opacity-900: 1;

Sass maps

Opacity utilities are declared via a Sass map and then generated with our utilities API.

$ouds-opacities: (
  "transparent": $ouds-opacity-0,
  "weaker":      $ouds-opacity-100,
  "weak":        $ouds-opacity-300,
  "medium":      $ouds-opacity-500,
  "emphasis":    $ouds-opacity-700,
  "opaque":      $ouds-opacity-900
);

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