Sections

Opacity

Utilities for controlling the opacity of an element.

Class Properties
.opacity-100 opacity: 1;
.opacity-75 opacity: .75;
.opacity-50 opacity: .5;
.opacity-25 opacity: .25;
.opacity-0 opacity: 0;

.opacity-100

.opacity-75

.opacity-50

.opacity-25

<div class="bg-gray-400 opacity-100"></div>
<div class="bg-gray-400 opacity-75"></div>
<div class="bg-gray-400 opacity-50"></div>
<div class="bg-gray-400 opacity-25"></div>

Use .opacity-0 to make an element fully transparent.

Variants

By default, no responsive or hover-state variants are generated for opacity utilities.

Responsive

To include responsive variants like .md:opacity-50, add "opacity" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "opacity",
);

Hover-state

To include hover-state variants like .hover:opacity-50, add "opacity-50" to the $hover-variants variable:

$hover-variants: (
  // ...
  "opacity",
);