search results:

    • Standard
    • React
    License Free hosting Learn Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • 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
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • 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
      • Templates
      • Vue
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    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 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 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 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 });
          
            
        

    Related resources

    Tutorials:

    colors hover state fullscreen background image masks hsla colors ripple effect carousel rounded corners shadows sizing

    Extended Docs:

    colors hover effects images shadows headers carousel gallery jumbotron video video carousel ripple background image background position colors gradient text opacity parallax

    Design System (Figma):

    introduction content should be the star lowering the contrast user experience do not start with the roof project personality design system plan the process principles tips and tricks
    • 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