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

mask-type

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-type-alpha mask-type: alpha;
mask-type-luminance mask-type: luminance;

Examples#

Basic example#

Use the mask-type-alpha and mask-type-luminance utilities to control the type of an SVG mask:

{ 

    <svg viewBox="0 0 384 192">
      <mask id="blob1" className="mask-type-alpha fill-gray-700/70">
        <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
      </mask>
      <image
        href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
        height="100%"
        width="100%"
        preserveAspectRatio="xMaxYMid slice"
        mask="url(#blob1)"
      />
    </svg>

  <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">mask-type-alpha</p>

    <svg viewBox="0 0 384 192">
      <mask id="blob2" className="mask-type-luminance fill-gray-700/70">
        <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
      </mask>
      <image
        href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
        height="100%"
        width="100%"
        preserveAspectRatio="xMaxYMid slice"
        mask="url(#blob2)"
      />
    </svg>

  <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
    mask-type-luminance
  </p>
</div>

}

<!-- [!code classes:mask-type-alpha,mask-type-luminance] -->
<svg>
  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" />
</svg>

<svg>
  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" />
</svg>

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

Responsive design#