Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

mask-mode

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página

Clase Propiedades CSS
mask-alpha mask-mode: alpha;
mask-luminance mask-mode: luminance;
mask-match mask-mode: match-source;

Examples#

Basic example#

Use the mask-alpha, mask-luminance and mask-match utilities to control the mode of an element's mask:

{ 

    </div>
    <p className="mt-3">mask-alpha</p>
  </div>
  <div>
    <div className="relative h-14.5">
      <div className="absolute top-0 left-[50%] -ml-3 flex h-12 flex-col items-center">
        <svg viewBox="0 0 32 34" className="w-7 flex-none text-white drop-shadow-sm dark:stroke-white/10">
          <use href="#gradient-color-stop" />
        </svg>
        <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
      </div>
      <div className="absolute top-0 right-px -mr-3 flex h-12 flex-col items-center">
        <svg viewBox="0 0 32 34" className="w-7 flex-none text-black drop-shadow-sm dark:stroke-white/10">
          <use href="#gradient-color-stop" />
        </svg>
        <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
      </div>
    </div>
    <div className="relative">
      <div className="relative z-10 h-24 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-white mask-r-from-50% mask-r-to-black bg-cover bg-center mask-luminance"></div>

    </div>
    <p className="mt-3">mask-luminance</p>
  </div>
</div>

}

{/ prettier-ignore /}

<!-- [!code classes:mask-alpha,mask-luminance] -->
<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>

When using mask-luminance the luminance value of the mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With mask-alpha, the opacity of the mask determines the visibility of the masked element.

Responsive design#