baseUtilities
Color opacity
Channel-specific alpha utilities that dim text, backgrounds, or borders without fading children.
Color opacity utilities adjust single-channel alpha without fading child elements.
Opacity modes
| Mode | Target | Classes |
|---|---|---|
| Element opacity | Whole element and descendants | opacity-0 to opacity-100 (Effects) |
| Channel alpha | Named color channel only | text-opacity-*, bg-opacity-*, border-opacity-* |
Scale steps: 0, 25, 50, 75, 100.
Channel alpha utilities
Combine with role color classes:
| Channel | Classes | Variable |
|---|---|---|
| Text | text-opacity-0 to text-opacity-100 | --_text-alpha |
| Background | bg-opacity-0 to bg-opacity-100 | --_background-alpha |
| Border | border-opacity-0 to border-opacity-100 | --_border-alpha |
<span class="bg-primary bg-opacity-50 text-primary-foreground rounded-sm px-sm">
50% background alpha
</span>
<p class="text-foreground text-opacity-75">75% text alpha.</p>Implementation
Color utilities compute alpha via calc(alpha * var(--_background-alpha, 1)). Alpha variables use @property with inherits: false, preventing values from bleeding into child elements.
| Variable | Syntax | Initial | Managed by |
|---|---|---|---|
--_text-alpha | <number> | 1 | text-opacity-* |
--_background-alpha | <number> | 1 | bg-opacity-* |
--_border-alpha | <number> | 1 | border-opacity-* |