mask con imágenes, degradados y composición

mask es la familia de propiedades que más se parece a background: mismas capas, mismos nombres, misma sintaxis de posición y tamaño. Esa simetría es deliberada y ayuda, salvo en dos puntos donde los valores iniciales no son los que esperas y donde el modo de interpretación cambia según de dónde venga la máscara. Con esas dos cosas claras, se abre la composición por capas, que es lo que de verdad tiene aquí valor.

La familia y sus valores iniciales

Dos de esos valores iniciales muerden. mask-repeat vale repeat, igual que en fondos, con lo que un degradado de máscara sin mask-size explícito y con no-repeat puede acabar repitiéndose si le das un tamaño. Y mask-position vale center, no 0% 0% como en fondos, lo cual es una asimetría que sorprende al portar código de una familia a la otra.

mask-origin vale border-box, otra asimetría: en fondos el origen es padding-box. Aquí tiene sentido, porque una máscara suele querer cubrir el elemento entero, borde incluido.

La abreviada acepta todo, con la barra separando posición de tamaño y las palabras de caja en el orden origen y luego recorte:

.a {
  mask: url(forma.svg) center / contain no-repeat;
}
.b {
  mask: linear-gradient(#000, transparent) 0 0 / 100% 100% no-repeat border-box;
}

Alfa, luminancia y match-source

Una máscara puede interpretarse de dos formas. En modo alfa, lo que importa es el canal alfa de la imagen de máscara: opaco enmascara al 100%, transparente al 0%, y el color se ignora por completo. En modo luminancia, lo que importa es el brillo: blanco enmascara al 100%, negro al 0%, y el alfa se multiplica encima.

mask-mode: match-source es el valor inicial y decide según el origen: para cualquier valor de tipo imagen, incluidos los degradados, el modo es alfa; para una referencia a un elemento <mask> de SVG, luminancia.

Eso explica un montón de confusión. Un degradado de blanco a negro no enmascara nada: los dos extremos son opacos, así que en modo alfa la máscara vale 1 en todas partes. El degradado que enmascara es de un color opaco a transparente:

/* No hace nada: los dos colores son opacos. */
.mal { mask-image: linear-gradient(#fff, #000); }

/* Correcto en modo alfa. */
.bien { mask-image: linear-gradient(#000, transparent); }

/* Correcto si fuerzas luminancia. */
.tambien { mask-image: linear-gradient(#fff, #000); mask-mode: luminance; }

Cuando el degradado se usa en modo alfa, el color es irrelevante: #000, #fff o red producen exactamente el mismo resultado mientras el alfa sea el mismo. Por convención se escribe negro, y da igual.

Forzar luminance tiene un uso concreto: reutilizar como máscara una imagen en escala de grises que no tiene canal alfa, cosa habitual cuando la máscara viene de una textura o de un mapa generado.

Componer varias máscaras

Aquí está lo que hace de mask una herramienta y no un truco. Cada capa de máscara se combina con el resultado acumulado de las anteriores mediante mask-composite, que ofrece cuatro operaciones de conjuntos:

Con eso se construyen regiones que ninguna forma describe. El caso canónico es el anillo, y con él el borde de degradado que sigue las esquinas redondeadas, que es la asignatura pendiente de border-image:

.borde-degradado {
  position: relative;
  border-radius: 16px;
}

.borde-degradado::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(in oklch to bottom right, #89b4fa, #f38ba8);

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  pointer-events: none;
}

Merece la pena leerlo despacio porque cada línea hace falta. El pseudoelemento cubre el elemento entero y lleva el degradado de fondo. Tiene dos píxeles de relleno, así que su caja de contenido es el rectángulo interior. La primera capa de máscara es un rectángulo opaco recortado a content-box, es decir, el interior. La segunda es un rectángulo opaco sin recorte, es decir, todo. exclude deja lo que está en una y no en la otra: el anillo de dos píxeles entre ambas. Y como el pseudoelemento hereda el radio, el anillo sigue la curva.

linear-gradient(#000 0 0) es el idioma para “una imagen de un color plano”: un degradado con las dos paradas en la misma posición. No hay una función solid-color() en CSS, así que este es el atajo estándar.

Otros patrones de una línea

Desvanecer el final de un contenedor con desplazamiento:

.desplazable {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}

Recortar una imagen con una forma suave sin tocar el archivo:

.retrato {
  mask-image: radial-gradient(circle closest-side, #000 70%, transparent);
}

Un icono monocromo coloreable desde CSS, que es la alternativa moderna a las fuentes de iconos:

.icono {
  display: inline-block;
  inline-size: 1.25em;
  block-size: 1.25em;
  background: currentColor;
  mask: url(iconos/flecha.svg) center / contain no-repeat;
}

El SVG aporta la forma y el color lo pone currentColor, así que el icono sigue al texto en cualquier estado y en cualquier tema sin duplicar archivos.