Opacity

Use opacity utilities to change elements' opacities.

Introduction

Opacity utilities are classes for setting the value of the opacity property. Let’s see how they change an element’s opacity in the below gellery.

<div class="o-emphasis"></div>
<div class="o-main"></div>
<div class="o-muted"></div>
<div class="o-more-muted"></div>
<div class="o-most-muted"></div>

Sass Variables

$opacity-emphasis: 1 !default

$opacity-main: 0.9 !default

$opacity-muted: 0.618 !default

$opacity-more-muted: 0.382 !default

$opacity-most-muted: 0.1 !default