View on GitHub

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

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="opacity-disabled text-brand-primary" aria-hidden="true">
  <use xlink:href="/docs/0.5/assets/img/ouds-web-sprite.svg#heart-recommend"/>
</svg>
html

CSS

Sass tokens

Semantic tokens

Opacity semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss 
$ouds-opacity-disabled: $core-ouds-opacity-200;
$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 maps

The opacity utilities are declared through this map and generated using our utilities API.

scss/_maps.scss 
$ouds-opacities: (
  "invisible":  $ouds-opacity-invisible,
  "weaker":     $ouds-opacity-weaker,
  "weak":       $ouds-opacity-weak,
  "disabled":   $ouds-opacity-disabled,
  "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.

scss/_utilities.scss 
"opacity-ouds": (
  property: opacity,
  values: $ouds-opacities
),
Bootstrap $enable-bootstrap-compatibility: true
scss/_utilities.scss 
"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
),