Opacity

Usage

Apply opacity with .opacity-{value}.

<div class="opacity-100">Fully visible</div>
<div class="opacity-50">Half visible</div>
<div class="opacity-0">Transparent</div>

Classes

State usage

Opacity utilities are useful for disabled-looking controls without changing the element structure.

<button class="bg-primary text-white px-4 py-2 opacity-50">
  Disabled state
</button>

Note: opacity-0 makes an element transparent, but it still occupies space. Use visibility or display utilities if you need to hide layout space.

Muted and disabled states

Three helpers dim an element to opacity: .5: the .muted class for text or muted controls, the .disabled class for non-interactive elements, and the native :disabled pseudo-class for form controls.

<!-- Muted -->
<span class="muted">Secondary text</span>

<!-- Class-based disabled state -->
<button class="disabled">Disabled button</button>

<!-- Native disabled attribute -->
<button disabled>Disabled button</button>