Tailwind Mask

Responsive mask built with Tailwind. Masks alter the visibility of an element by either partially or fully hiding it.


Basic example

        
            
    <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs" style="background-position: 50%;">
      <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="max-w-xs" />
      <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-50"></div>
    </div>
    
        
    

Color

        
            
    <div class="grid grid-cols-3 gap-4">
      <div class="mb-4">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-indigo-700 opacity-50"></div>
        </div>
      </div>
      <div class="mb-4">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-purple-700 opacity-50"></div>
        </div>
      </div>
      <div class="mb-4">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-green-700 opacity-50"></div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-3 gap-4">
      <div class="mb-4 md:mb-0">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-red-700 opacity-50"></div>
        </div>
      </div>
      <div class="mb-4 md:mb-0">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-white opacity-50"></div>
        </div>
      </div>
      <div class="mb-4 md:mb-0">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-blue-300 opacity-50"></div>
        </div>
      </div>
    </div>
    
        
    

Gradient

        
            
    <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs" style="background-position: 50%;">
      <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="max-w-xs" />
      <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-70"></div>
    </div>
    
        
    

Opacity

        
            
    <div class="grid grid-cols-3 gap-4">
      <div class="mb-4">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-10"></div>
        </div>
      </div>
      <div class="mb-4">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-30"></div>
        </div>
      </div>
      <div class="mb-4">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-50"></div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-3 gap-4">
      <div class="mb-4 md:mb-0">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-70"></div>
        </div>
      </div>
      <div class="mb-4 md:mb-0">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-80"></div>
        </div>
      </div>
      <div class="mb-4 md:mb-0">
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" style="background-position: 50%;">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-90"></div>
        </div>
      </div>
    </div>
    
        
    

Content

Can you see me?

        
            
    <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs" style="background-position: 50%;">
      <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="max-w-xs" />
      <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0,0,0,0.6);">
        <div class="flex justify-center items-center h-full">
          <p class="text-white opacity-100">Can you see me?</p>
        </div>
      </div>
    </div>
    
        
    

Ripple

        
            
    <div class="grid grid-cols-2 gap-4">
      <div>
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" data-mdb-ripple="true" data-mdb-ripple-color="light">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(251,251,251,0.6);"></div>
        </div>
      </div>
      <div>
        <div class="relative overflow-hidden bg-no-repeat bg-cover w-full" data-mdb-ripple="true">
          <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="w-full" />
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0,0,0,0.6);"></div>
        </div>
      </div>
    </div>
    
        
    
        
            
    <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
      <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="max-w-xs" />
      <a href="#!">
        <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-gray-900 opacity-60"></div>
      </a>
    </div>
    
        
    
        
            
    <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs" data-mdb-ripple="true" data-mdb-ripple-color="light">
      <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="max-w-xs" />
      <a href="#!">
        <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-gray-200 opacity-60"></div>
      </a>
    </div>
    
        
    

If you are looking for more advanced options, try Bootstrap Masks from MDBootstrap.