DocsBlogShowcasePlus
  1. Efectos
  2. mask-image

Efectos

mask-image

Utilidades para controlar la imagen de máscara de un elemento.

ClaseEstilos
mask-[<value>]
mask-image: <value>;
mask-(<custom-property>)
mask-image: var(<custom-property>);
mask-none
mask-image: none;
mask-linear-<number>
mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
-mask-linear-<number>
mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
mask-linear-from-<number>
mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));
mask-linear-from-<percentage>
mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));
mask-linear-from-<color>
mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));
mask-linear-from-(<custom-property>)
mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));
mask-linear-from-[<value>]
mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));

Ejemplos

Usar una máscara de imagen

Usa la sintaxis mask-[<value>] para establecer la imagen de máscara de un elemento:

<div class="mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...">
  <!-- ... -->
</div>

Enmascarar bordes

Usa utilidades como mask-b-from-<value> y mask-t-to-<value> para añadir una máscara de gradiente lineal a un solo lado de un elemento:

mask-t-from-50%

mask-r-from-30%

mask-l-from-50% mask-l-to-90%

mask-b-from-20% mask-b-to-80%

<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

Además, usa utilidades como mask-x-from-70% y mask-y-to-90% para aplicar una máscara a dos lados de un elemento al mismo tiempo:

mask-x-from-70% mask-x-to-90%

mask-y-from-70% mask-y-to-90%

<div class="mask-x-from-70% mask-x-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-y-from-70% mask-y-to-90% bg-[url(/img/mountains.jpg)] ..."></div>

Por defecto, las máscaras de gradiente lineal hacen una transición de negro a transparente, pero puedes personalizar los colores del gradiente usando las utilidades mask-<side>-from-<color> y mask-<side>-to-<color>.

Añadir una máscara lineal angulada

Usa utilidades como mask-linear-<angle>, mask-linear-from-20 y mask-linear-to-40 para añadir una máscara de gradiente lineal personalizada a un elemento:

mask-linear-50

-mask-linear-50

<div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

Añadir una máscara radial

Usa las utilidades mask-radial-from-<value> y mask-radial-to-<value> para añadir una máscara de gradiente radial a un elemento:

Velocidad

Hecho para usuarios avanzados

Trabaja más rápido que nunca con nuestros atajos de teclado

<div class="flex items-center gap-4">
  <img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" />
  <div class="font-medium">
    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Velocidad</p>
    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Hecho para usuarios avanzados</p>
    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
      Trabaja más rápido que nunca con customizable keyboard shortcuts
    </p>
  </div>
</div>

Por defecto, las máscaras de gradiente radial hacen una transición de negro a transparente, pero puedes personalizar los colores del gradiente usando las utilidades mask-radial-from-<color> y mask-radial-to-<color>.

Establecer la posición radial

Usa utilidades como mask-radial-at-bottom-left y mask-radial-at-[35%_35%] para establecer la posición del centro de la máscara de gradiente radial:

mask-radial-at-top-left

mask-radial-at-top

mask-radial-at-top-right

mask-radial-at-left

mask-radial-at-center

mask-radial-at-right

mask-radial-at-bottom-left

mask-radial-at-bottom

mask-radial-at-bottom-right

<div class="mask-radial-at-top-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-center mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>

Esto es diferente de mask-position, que establece la posición de la imagen de máscara en sí, no del gradiente radial.

Establecer el tamaño radial

Usa utilidades como mask-radial-closest-corner y mask-radial-farthest-side para establecer el tamaño de la máscara de gradiente radial:

mask-radial-closest-side

mask-radial-closest-corner

mask-radial-farthest-side

mask-radial-farthest-corner

<div class="mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>

Al establecer un tamaño de gradiente radial personalizado, las unidades que puedes usar dependen de la <ending-shape> del gradiente, que por defecto es ellipse.

Con mask-circle, solo puedes usar una única longitud fija, como mask-radial-[5rem]. Mientras que con mask-ellipse, puedes especificar cada eje como una longitud fija o porcentaje, como mask-radial-[40%_80%].

Añadir una máscara cónica

Usa las utilidades mask-conic-from-<value>, mask-conic-to-<value> y mask-conic-<angle> para añadir una máscara de gradiente cónico a un elemento:

Almacenamiento usado: 75%

0.48 GB de 2 GB restantes

<div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
  <div class="grid grid-cols-1 grid-rows-1">
    <div class="border-4 border-gray-100 dark:border-gray-700 ..."></div>
    <div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div>
  </div>
  <div class="w-0 flex-1 text-sm text-gray-950 dark:text-white">
    <p class="font-medium">Almacenamiento usado: 75%</p>
    <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> de 2 GB restantes</p>
  </div>
</div>

Por defecto, las máscaras de gradiente cónico hacen una transición de negro a transparente, pero puedes personalizar los colores del gradiente usando las utilidades mask-conic-from-<color> y mask-conic-to-<color>.

Combinar máscaras

Las utilidades de máscara de gradiente, como mask-radial-from-<value>, mask-conic-to-<value> y mask-l-from-<value>, se pueden combinar para crear máscaras de gradiente más complejas:

<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

Este comportamiento depende del hecho de que Tailwind establece la propiedad mask-composite en intersect por defecto. Cambiar esta propiedad afectará cómo se combinan las máscaras de gradiente.

Eliminar imágenes de máscara

Usa la utilidad mask-none para eliminar una imagen de máscara existente de un elemento:

<div class="mask-none">
  <!-- ... -->
</div>

Usar un valor personalizado

Usa utilidades como mask-linear-[<value>] y mask-radial-[<value>] para establecer el mask image basado en un valor completamente personalizado:

<div class="mask-linear-[70deg,transparent_10%,black,transparent_80%] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis mask-linear-(<custom-property>) :

<div class="mask-linear-(--my-mask) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para mask-linear-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad mask-image con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="mask-radial-from-70% md:mask-radial-from-50% ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizar tu tema

Usa las variables de tema --color-* para personalizar las utilidades color en tu proyecto:

@theme {
  --color-regal-blue: #243c5a; 
}

Ahora utilidades como mask-radial-from-regal-blue,mask-conic-to-regal-blue, y mask-b-from-regal-blue pueden ser usadas en tu marcado:

<div class="mask-radial-from-regal-blue">
  <!-- ... -->
</div>

Aprende más sobre la personalización de tu tema en la documentación del tema.

En esta página

Copyright © 2025 Tailwind Labs Inc.·Política de Marca Registrada