Backgrounds

Background Opacity

Utilities for sets opacity of background color.

Variant

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

API

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

Usage

Set background-color with 100% opacity to an element.

<div class="bg-shade-amber-1 bg-opacity-100 ... height-32 width-64">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-shade-amber-1,
    .bg-opacity-100,
    .height-32,
    .width-64;
}

SCSS

Set background-color with 75% opacity to an element.

<div class="bg-shade-amber-1 bg-opacity-75 ... height-32 width-64">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-shade-amber-1,
    .bg-opacity-75,
    .height-32,
    .width-64;
}

SCSS

Set background-color with 50% opacity to an element.

<div class="bg-shade-amber-1 bg-opacity-50 ... height-32 width-64">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-shade-amber-1,
    .bg-opacity-50,
    .height-32,
    .width-64;
}

SCSS

Set background-color with 25% opacity to an element.

<div class="bg-shade-amber-1 bg-opacity-25 ... height-32 width-64">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-shade-amber-1,
    .bg-opacity-25,
    .height-32,
    .width-64;
}

SCSS

Set background-color with 0% opacity to an element.

<div class="bg-shade-amber-1 bg-opacity-0 ... height-32 width-64">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-shade-amber-1,
    .bg-opacity-0,
    .height-32,
    .width-64;
}

SCSS