Opacity

Opacity utilities control the transparency of an element and all of its children.

Opacity values

Five levels are available: opacity-0 (invisible), opacity-25, opacity-50, opacity-75, and opacity-100 (fully opaque).

<div class="d-flex gap-3">
  <span class="bg-surface-raised rounded-sm p-2 opacity-100">opacity-100</span>
  <span class="bg-surface-raised rounded-sm p-2 opacity-75">opacity-75</span>
  <span class="bg-surface-raised rounded-sm p-2 opacity-50">opacity-50</span>
  <span class="bg-surface-raised rounded-sm p-2 opacity-25">opacity-25</span>
  <span class="bg-surface-raised rounded-sm p-2 opacity-0">opacity-0</span>
</div>

opacity-100opacity-75opacity-50opacity-25opacity-0

Reference

Class	Property	Responsive
`.opacity-0`	`opacity: 0`	No
`.opacity-25`	`opacity: 0.25`	No
`.opacity-50`	`opacity: 0.5`	No
`.opacity-75`	`opacity: 0.75`	No
`.opacity-100`	`opacity: 1`	No