Effects

Opacity

Utilities for sets the transparency of an element.

Variant

Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled

API

class	css
opacity-100	opacity: 1	Text
opacity-75	opacity: .75	Text
opacity-50	opacity: .5	Text
opacity-25	opacity: .25	Text
opacity-0	opacity: 0	Text

Usage

opacity-100

opacity-75

opacity-50

opacity-25

opacity-0

<div class="opacity-50 ... bg-tint-granite-1 ... height-32 width-32">
...
</div>

HTML

.dummy {
  @extend
    .opacity-50,
    .bg-tint-granite-1,
    .height-32,
    .width-32;
}

SCSS