Opacity

Class reference

Examples

<div class="opacity-50">Half-transparent.</div>

<button class="opacity-50" disabled>Disabled state visual.</button>

Opacity vs. color alpha

Opacity affects the entire element, including its text, borders, and children. For "make this color slightly transparent" while keeping the rest of the element opaque, use color alpha through OKLCH instead:

.faded-bg {
  /* element stays fully opaque; background gets transparency */
  background: oklch(from var(--primary) l c h / 0.1);
  color: var(--foreground);
}

For dim or fade effects layered over content, use shade or tint tokens. They're built for this:

.scrim {
  background: var(--shade-700); /* 70% dark scrim */
}

When to use which

• Opacity utility. Disabled buttons, fading entire blocks in or out, transitioning visibility.
• Color alpha. Semi-transparent surfaces, borders, or text where the rest of the element should remain readable.
• Shade / tint tokens. Overlays designed to dim or fade what's behind them, with mode-aware behavior.