La propiedad mask-image

Existe una familia de propiedades CSS poco conocidas que permiten crear máscaras de composición, mediante las cuales, utilizando imágenes o formas "compatibles", puedes establecer máscaras que recortarán o establecerán formas compuestas aplicadas a elementos de nuestro HTML.

Máscaras CSS

Para crear estas máscaras utilizaremos las siguientes propiedades:

Propiedad	Descripción
mask-image	Indica una imagen, gradiente o forma SVG para usar como máscara.
mask-mode	Indica si usar canales alfa o de luz como máscara.
mask-repeat	Indica cómo se repetirá una máscara con tamaño y posición.
mask-position	Indica la posición donde debe empezar la máscara.
mask-clip	Indica el área al que afectará la máscara.
mask-origin	Indica como posicionar el área que afectará a la máscara.
mask-size	Permite darle un tamaño específico a la máscara.
mask-composition	Si hay múltiples máscaras, define como aplicas composición.
mask	Propiedad de atajo para hacer todo lo anterior.

Ten en cuenta que las máscaras aún son una característica no soportada por completo en ciertos navegadores, por lo que puede que no tengan soporte o tengas que usar prefijos como -webkit- antes de las propiedades.

La propiedad mask-image

La propiedad principal de las máscaras CSS es mask-image, la cuál se puede pensar en ella como un análogo a background-image con las imágenes de fondo. En su caso, mask-image establece una imagen a modo de máscara, y aunque hablamos de imagen, realmente nos referimos a varios tipos de elementos:

Propiedad	Valor
mask-image	none | | url(image) | url(svgfile#id)

• Una imagen externa referenciada (JPEG, PNG, WEBP, etc...)
• Un gradiente creado con CSS (lineal, radial o cónico)
• Una referencia a una parte de un SVG externo mediante un id

Veamos un ejemplo con código CSS:

.element {
  width: 600px;
  height: 400px;
  background: url(gato.jpg) left / cover;
  mask-image: radial-gradient(circle 250px at 40% 50%, black 75%, transparent 76%);
}

Puedes probar a hacer cambios en un CodePen para ver como funciona. Con la propiedad de atajo background establecemos una imagen de fondo con background-image, colocamos con background-position y damos tamaño con background-size, además de dar tamaño de alto y ancho con width y height.

Con la propiedad mask-image creamos una máscara negra basada en un gradiente como la de la imagen. Esta máscara se aplicará al elemento y su imagen de fondo, de modo que la parte en negro oculta y la parte transparente deja ver la imagen:

Esto es una fantástica forma de enmascarar nuestras imágenes y darle formas flexibles y potentes mediante código. Recuerda que puedes utilizar no sólo gradientes radiales, sino otro tipos de gradientes, imágenes con transparencia o formas personalizadas mediante SVG.

Recuerda que al igual que con background-image, es posible indicar múltiples máscaras de imágenes, simplemente separando por coma. Si lo haces, recuerda que las propiedades relacionadas utilizarán el valor para todas las máscaras, o respetarán el orden en el caso de separar por comas.

La propiedad mask-mode

Mediante la propiedad CSS mask-mode podemos cambiar el modo en el que se crea la máscara. La propiedad tiene los siguientes valores posibles:

Propiedad	Valor
mask-mode	match-source | alpha | luminance

En el caso de utilizar un modo alpha, la máscara utilizará los valores alfa de la máscara para utilizarlos como transparencia. Sin embargo, si configuramos el valor luminance utilizará los valores con más brillo para utilizarlos como transparencia.

El valor, match-source es el valor que trae por defecto.

La propiedad mask-repeat

La propiedad mask-repeat se entiende fácil si hacemos el simil con la propiedad background-repeat de la familia de propiedades de imágenes de fondo, ya que funciona exactamente igual. Los valores disponibles son los siguientes:

Propiedad	Valor	Más info
mask-repeat	repeat | repeat-x | repeat-y | no-repeat | space | round	Ver background-repeat

Por defecto, la máscara de imagen establecida se repetirá en el eje x y en el eje y, ya que tiene establecido el valor repeat. Utilizaríamos repeat-x si queremos que se repita solo en horizontal, repeat-y para repetir en vertical o no-repeat para que no se repita en ningún eje.

Por último, los valores space o round definen como quieres que ajuste el espacio sobrante.

La propiedad mask-position

La propiedad mask-position permite colocar la máscara de imagen y desplazarla una cierta cantidad de espacio. Por defecto, el valor indicado es 0% 0%, por lo que se colocará lo más a la izquierda y arriba posible. Sin embargo, podemos cambiar los valores a:

• left, center o right para el eje x
• top, center o bottom para el eje y
• Valores de tamaño para ambos ejes

Obviamente, también puedes combinarlos.

Propiedad	Valor	Más info
mask-position	0% 0% | x y	Ver background-position

Si tienes más dudas, echa un vistazo a la propiedad background-position, en el tema de imágenes de fondo, ya que funciona de forma muy parecida.

La propiedad mask-clip

La propiedad mask-clip se puede usar para indicar el área que será afectada por una máscara. Por defecto, el valor establecido es border-box, que incluye contenido, relleno y borde (ver tema de modelo de cajas). Sin embargo, se pueden utilizar otros valores:

Propiedad	Valor	Más info
mask-clip	border-box | no-clip | content-box | padding-box | fill-box | stroke-box | view-box	Ver background-clip

Entre esos otros valores se encuentran:

• padding-box: El área incluye padding y contenido (excluye borde).
• content-box: El área incluye sólo contenido (excluye padding y borde).
• no-clip: El contenido no es recortado.
• margin-box: El área incluye márgenes.

El resto de valores, se utilizan específicamente en ficheros SVG:

• view-box: El área incluye el viewbox (lienzo).
• fill-box: El área incluye el contenido del SVG.
• stroke-box: El área incluye los trazos (bordes) del SVG.

La propiedad mask-origin

Con prácticamente los mismos valores que la propiedad anterior, la propiedad mask-origin permite indicar el origen del área de la máscara de imagen. Con los siguientes valores puedes marcar como se comportará el área respecto a su posición de origen:

Propiedad	Valor	Más info
mask-origin	border-box | content-box | padding-box | fill-box | stroke-box | view-box	Ver background-origin

Si tienes dudas, consulta las propiedades background-clip y background-origin, en el apartado de fondos de imágenes.

La propiedad mask-size

La propiedad mask-size nos permite indicar el tamaño que tendrá la máscara indicada. Observa que puedes indicar dos valores, que corresponden al tamaño de ancho y al tamaño de alto. Puedes indicar valores como:

Propiedad	Valor	Más info
mask-size	auto auto | | cover | contain	Ver background-size

El significado de cada valor es el siguiente:

• auto establece el valor de forma automática (valor por defecto para ambos ejes)
• Valor medido en un tamaño concreto o en porcentajes
• Utilizar un único valor cover, para un ajuste automático del alto
• Utilizar un único valor contain, para un ajuste automático del ancho

Veamos un ejemplo:

body {
  background: repeating-linear-gradient(-25deg, purple 0, blueviolet 25%);
}

.element {
  width: 300px;
  height: 300px;
  padding: 25px;
  background: linear-gradient(rgb(0,0,0, 0.75), deeppink);
  border: 4px solid #000;

  -webkit-mask-image: url("mask.svg#mask");
  -webkit-mask-position: 32px 32px;
  -webkit-mask-repeat: round;
  -webkit-mask-size: 64px 64px;
}

Observa que en este caso, estamos indicando los prefijos -webkit- para que funcione en Chrome. Estamos usando como máscara el fichero externo mask.svg, donde tendremos un elemento con id="mask" que es el trayecto que usaremos para usar de máscara. Además, marcamos una posición para colocar la máscara, la repetimos redondeando el espacio sobrante y le damos un tamaño concreto de 64x64.

La propiedad mask-composite

La propiedad mask-composite te permite indicarle al navegador como se va a componer la máscara de imagen en el caso de tener múltiples máscaras definidas. Observa que entre los valores disponibles se encuentran los siguientes:

Propiedad	Valor
mask-composite	add | subtract | intersect | exclude

El valor add es el valor por defecto, por lo que por norma general, se suman (superponen) las máscaras. Estos métodos de composición se utilizan aplicándose a la máscara actual y al resto de máscaras inferiores a ella.

Valor	Descripción
add	Superpone o suma la máscara actual sobre el resto de máscaras inferiores (source over)
subtract	La máscara actual resta el contenido del resto de máscaras inferiores (source out)
intersect	Se queda con la parte común de la máscara actual y las inferiores (source in)
exclude	Se queda con la parte no común de la máscara actual e inferiores (xor)

Así pues, con add podríamos superponer varias máscaras, con subtract restar el contenido de una máscara al contenido del resto, con intersect quedarse con la intersección (parte común) de la máscara actual y el resto de máscaras inferiores y con exclude quedarse con lo contrario a la intesección (*parte no común).

La propiedad de atajo mask

Por último, la propiedad mask nos permitirá abreviar todas las propiedades relacionadas con las máscaras CSS, en una sola propiedad de atajo o shorthand. Recuerda que si no necesitas indicar algún valor, puedes omitirlo y se utilizará el valor por defecto:

.element {
  /* <mask-image> <mask-position> / <mask-size> <mask-repeat> <mask-origin> <mask-clip> <mask-composite> <mask-mode> */

  mask: url("mask.svg#path") 25% 25% / 200px 250px repeat-x border-box border-box add match-source;
}