Background opacity

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


Class reference

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

# Usage

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

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

# Responsive

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

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

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