Tailwind CSS Mask

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.

HTML

        
            
      <div
        class="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
        <img
          src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
          class="max-w-xs" />
        <div
          class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
      </div>

Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Color

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

HTML

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

Gradient

You can even use a fancy gradient as a mask.

HTML

        
            
      <div
        class="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
        <img
          src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
          class="max-w-xs" />
        <div
          class="absolute bottom-0 left-0 right-0 top-0 h-full w-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.

HTML

        
            
      <div class="grid grid-cols-3 gap-4">
        <div class="mb-4">
          <div
            class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-10"></div>
          </div>
        </div>
        <div class="mb-4">
          <div
            class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-30"></div>
          </div>
        </div>
        <div class="mb-4">
          <div
            class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-3 gap-4">
        <div class="mb-4 md:mb-0">
          <div
            class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-70"></div>
          </div>
        </div>
        <div class="mb-4 md:mb-0">
          <div
            class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-80"></div>
          </div>
        </div>
        <div class="mb-4 md:mb-0">
          <div
            class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed 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?

HTML

        
            
      <div
        class="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
        <img
          src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
          class="max-w-xs" />
        <div
          class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
          style="background-color: hsla(0, 0%, 0%, 0.6)">
          <div class="flex h-full items-center justify-center">
            <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.

HTML

        
            
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div
            class="relative w-full overflow-hidden bg-cover bg-no-repeat"
            data-te-ripple-init
            data-te-ripple-color="light">
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
              style="background-color: hsla(0, 0%, 98%, 0.6)"></div>
          </div>
        </div>
        <div>
          <div
            class="relative w-full overflow-hidden bg-cover bg-no-repeat"
            data-te-ripple-init>
            <img
              src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
              class="w-full" />
            <div
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
              style="background-color: hsla(0, 0%, 0%, 0.6)"></div>
          </div>
        </div>
      </div>

Link regular

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

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

HTML

        
            
      <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
        <img
          src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
          class="max-w-xs" />
        <a href="#!">
          <div
            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-neutral-900 bg-fixed opacity-60"></div>
        </a>
      </div>

Link with ripple

Add data-te-ripple-init utility with image to achieve an additional ripple effect.

HTML
javascript

        
            
      <div
        class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat"
        data-te-ripple-init
        data-te-ripple-color="light">
        <img
          src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
          class="max-w-xs" />
        <a href="#!">
          <div
            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-neutral-200 bg-fixed opacity-60"></div>
        </a>
      </div>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTE,
      } from "tw-elements";
      
      initTE({ Ripple });

Mask

Basic example

Color

Gradient

Opacity

Content

Ripple

Link regular

Link with ripple

Related resources

Tutorials:

Extended Docs:

Design System (Figma):