Text opacity

Utilities for controlling the opacity of an element's text color


Class reference

ClassProperties
text-opacity-0--tw-text-opacity: 0;
Aa
text-opacity-5--tw-text-opacity: 0.05;
Aa
text-opacity-10--tw-text-opacity: 0.1;
Aa
text-opacity-15--tw-text-opacity: 0.15;
Aa
text-opacity-20--tw-text-opacity: 0.2;
Aa
text-opacity-25--tw-text-opacity: 0.25;
Aa
text-opacity-30--tw-text-opacity: 0.3;
Aa
text-opacity-35--tw-text-opacity: 0.35;
Aa
text-opacity-40--tw-text-opacity: 0.4;
Aa
text-opacity-45--tw-text-opacity: 0.45;
Aa
text-opacity-50--tw-text-opacity: 0.5;
Aa
text-opacity-55--tw-text-opacity: 0.55;
Aa
text-opacity-60--tw-text-opacity: 0.6;
Aa
text-opacity-65--tw-text-opacity: 0.65;
Aa
text-opacity-70--tw-text-opacity: 0.7;
Aa
text-opacity-75--tw-text-opacity: 0.75;
Aa
text-opacity-80--tw-text-opacity: 0.8;
Aa
text-opacity-85--tw-text-opacity: 0.85;
Aa
text-opacity-90--tw-text-opacity: 0.9;
Aa
text-opacity-95--tw-text-opacity: 0.95;
Aa
text-opacity-100--tw-text-opacity: 1;
Aa

# Usage

Control the opacity of an element’s text color using the .text-opacity-{amount} utilities.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

<p class="text-violet-600 text-opacity-100 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-75 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-50 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-25 ...">The quick brown fox ...</p>
<p class="text-violet-600 text-opacity-0 ...">The quick brown fox ...</p>

Note that because these utilities are implemented using CSS custom properties, a .text-{color} utility must be present on the same element for them to work.

Don't try to use text opacity utilities on an inherited text color
<div class="text-black">
<div class="text-opacity-50">...</div>
</div>
Do make sure to add a text color utility to the same element explicitly
<div class="text-black">
<div class="text-black text-opacity-50">...</div>
</div>

# Responsive

To control an element’s text color opacity at a specific breakpoint, add a {screen}: prefix to any existing text color opacity utility. For example, use md:text-opacity-50 to apply the text-opacity-50 utility at only medium screen sizes and above.

<div class="text-blue-500 text-opacity-75 md:text-opacity-50">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.