Tailwind Mask component

Responsive mask built with Tailwind CSS. Masks are used to make content more visible by providing a proper contrast. Download for free without registration.


Basic example

Use code below to add mask on top of image to provide contrast a proper contrast.

        
            
      <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

By manipulating classes you can change the color and opacity of the mask.

        
            
      <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

You can even use a fancy gradient as a mask.

        
            
      <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

By changing the class you can manipulate the opacity of the mask.

        
            
      <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

The main purpose of the mask is to provide an appropriate contrast between the image and its content. The most common use of masks is to put text on an image.

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

You can easily add a ripple effect to the image with a mask.

        
            
      <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>
      
        
    

Wrap a mask to change the image into a clickable link.

Use regular link to get image with ripple without additional effect.

        
            
      <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>
      
        
    

Add data-mdb-ripple="true" utility with image to achieve an additional ripple effect.

        
            
      <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.