Tailwind CSS Background Opacity

Last Updated : 23 Mar, 2022

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The bg-opacity is the class of an element that describes the transparency of the element. It is the alternative to the CSS Opacity / Transparency.

Background Opacity class:

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

Note: The number of the opacity can be changeable from 0 to 100 with the span of 5.

Syntax:

<element class="bg-{opacity}">...</element>

Example:

HTML

<!DOCTYPE html>  
<head>  
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet">  
</head>  
  
<body class="text-center mx-4 space-y-2">  
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1>  
    <b>Tailwind CSS Background Opacity Class</b>  
    <div class="mx-14 bg-green-200 grid grid-rows-4 
                grid-flow-col text-justify p-4"> 
          
       <p class="bg-green-800  
                 bg-opacity-100 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-green-800  
                 bg-opacity-75 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-green-800  
                 bg-opacity-50 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-green-800  
                 bg-opacity-25 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-yellow-800  
                 bg-opacity-100 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-yellow-800  
                 bg-opacity-75 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
  
       <p class="bg-yellow-800  
                 bg-opacity-50 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-yellow-800  
                 bg-opacity-25 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-pink-800  
                 bg-opacity-100 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-pink-800  
                 bg-opacity-75 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-pink-800  
                 bg-opacity-50 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
       <p class="bg-pink-800  
                 bg-opacity-25 p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
    </div> 
</body>  
  
</html>  

Output:

Background opacity class

Suggest improvement

Tailwind CSS Background Color

Tailwind CSS Background Position

Share your thoughts in the comments

Tailwind CSS Layout

Tailwind CSS Flexbox

Tailwind CSS Grid

Tailwind CSS Alignment

Tailwind CSS Spacing

Tailwind CSS Sizing

Tailwind CSS Typography

Tailwind CSS Backgrounds

Tailwind CSS Borders

Tailwind CSS Effects

Tailwind Filters

Tailwind CSS Tables

Tailwind CSS Transitions and Animation

Tailwind CSS Transforms

Tailwind CSS Interactivity

Tailwind CSS SVG

Tailwind CSS Background Opacity

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?