Opacity fades the entire element including children. Prefer dedicated muted color tokens for disabled UI.
When to use
Overlays, fade transitions, and de-emphasized content. Avoid opacity-only disabled states on mixed backgrounds.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Disabled affordance
opacity-50 pointer-events-noneFade plus blocked interaction. Prefer a dedicated muted color when the background varies.
Subtle overlay
bg-black/40 backdrop-blur-[2px]Alpha on a background color tints what's behind. Often better than opacity on the whole subtree.
Summary
- opacity affects the entire element including descendants and text, unlike rgba on background alone.
- Use for disabled states, fading UI, and de-emphasizing secondary content without changing color tokens.
- opacity below 1 still receives pointer events unless you add pointer-events-none. Faded buttons stay clickable by default.
- For accessible disabled states, pair reduced opacity with cursor and aria-disabled, not opacity alone.
- Tailwind opacity-* uses a 0-100 scale in utilities (opacity-50 = 0.5) matching percentage semantics.