Opacity vs alpha colors is one of the most common decision points we see. Here is the honest breakdown.
The short version#
opacity-* fades the whole element; /50 colors fade just one surface.
Point by point#
| Aspect | Analysis |
|---|---|
| Scope | opacity affects children too; alpha colors affect one property |
| Readability | Alpha backgrounds keep text crisp; opacity fades text with them |
| Overlays | bg-black/50 for scrims; opacity for reveal animations |
| Compositing | opacity can trigger stacking contexts; alpha cannot |
Bottom line#
Pick based on your constraint, not ideology — and remember the comparison pages link to hands-on recipes so you can verify the claim in your own project within minutes.
Related comparisons#
comparisons/index|All comparisons