Dialtone

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.

Classes

ClassOutput
.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;

Usage

Use d-fco{n} to change a font-color's opacity. You can also change font-color's opacity on :hover, :focus, :focus-visible, or in dark mode by using the respective h:d-fco{n}, f:d-fco{n}, fv:d-fco{n}, or d:d-fco{n} prefixes.

<p class="d-fc-pink-600">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco99">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco95">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco90">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco75">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco50">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco25">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco10">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-pink-600 d-fco0">The quick brown fox jumps over the lazy dog.</p>

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>
</p>
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>
</p>
Last Updated: