Opacity

Utilities for controlling the opacity of an element


Class reference

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

Usage

Control the opacity of an element using the .opacity-{amount} utilities.

100%
75%
50%
25%
0%
<div class="bg-blue opacity-100 ..."></div>
<div class="bg-blue opacity-75 ..."></div>
<div class="bg-blue opacity-50 ..."></div>
<div class="bg-blue opacity-25 ..."></div>
<div class="bg-blue opacity-0 ..."></div>

Responsive

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

<div class="opacity-100 md:opacity-50 ...">
<!-- ... -->
</div>

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