Text Opacity

Utilities for controlling an element's font-color opacity.

The ability to control an element's color is only provided as a class. We do not provide variables to control this. The text opacity class resets the font color's alpha channel CSS variable value.


Class Output
.d-fco0 --fco: 0% !important;
.d-fco10 --fco: 10% !important;
.d-fco25 --fco: 25% !important;
.d-fco50 --fco: 50% !important;
.d-fco75 --fco: 75% !important;
.d-fco90 --fco: 90% !important;
.d-fco95 --fco: 95% !important;
.d-fco99 --fco: 99% !important;


Use d-fco{n} to change a font-color's opacity.

Please note that because the opacity adjustments are made via CSS variables, a font-color utility class must be present on the same element to work.

Text opacity utility classes don't inherit colors.
<p class="d-fc-dark">
<span class="d-fco75">The quick brown fox jumps over the lazy dog.</span>
Add a font-color utility classes to enable the opacity class to work.
<p class="d-fc-dark">
<span class="d-fc-dark d-fco75">The quick brown fox jumps over the lazy dog.</span>