search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Mask

    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 top-0 right-0 bottom-0 left-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 Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-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 top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed"
              style="background-color: rgba(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 top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed"
                  style="background-color: rgba(251, 251, 251, 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 top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed"
                  style="background-color: rgba(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 top-0 right-0 bottom-0 left-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
            
                
          <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 top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-neutral-200 bg-fixed opacity-60"></div>
            </a>
          </div>
          
            
        

    Related resources

    Bootstrap Gallery Bootstrap Carousel Slider with Thumbnails Testimonials / Reviews How To Center Image How to make image responsive in Bootstrap Hover effect Gallery

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

    • Basic example
    • Color
    • Gradient
    • Opacity
    • Content
    • Ripple
    • Link regular
    • Link with ripple
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com