Recortar es binario, enmascarar tiene alfa

clip-path y mask se presentan como alternativas y no lo son: son dos operaciones distintas que casualmente sirven para lo mismo en el caso más simple. Una decide para cada píxel si está o no está; la otra decide cuánto está. De esa diferencia de un bit frente a ocho salen todas las demás, incluidas las de coste.

Las dos operaciones, en una línea cada una

Recortar multiplica el alfa de cada píxel por 0 o por 1, según esté dentro o fuera de una región geométrica.

Enmascarar multiplica el alfa de cada píxel por un número entre 0 y 1, tomado de otra imagen.

El recorte es el caso particular de la máscara donde la máscara solo tiene valores extremos. Cualquier cosa que haga clip-path la puede hacer mask; lo contrario no.

En la práctica el recorte no es exactamente binario en los bordes, porque el rasterizador aplica antialiasing y los píxeles que la frontera atraviesa reciben una cobertura parcial. Pero esa suavización es de un píxel y no la controlas: es una consecuencia del muestreo, no un parámetro.

Lo que solo puede la máscara

Cualquier transición gradual. Un desvanecimiento del contenido hacia un borde, una viñeta, un difuminado. clip-path no puede: solo sabe cortar.

.lista-larga {
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

Formas que vienen de una imagen. La silueta de un logotipo, una textura, un pincel. Cualquier PNG con canal alfa o cualquier SVG sirve de máscara, y su forma puede ser arbitrariamente compleja sin escribir una sola coordenada.

.texturado {
  background: linear-gradient(in oklch, #89b4fa, #f38ba8);
  mask-image: url(pincelada.png);
  mask-size: cover;
  mask-repeat: no-repeat;
}

Composición de varias regiones. mask-composite combina capas de máscara con las operaciones de conjuntos, y eso permite construir regiones —un anillo, un marco, la diferencia de dos formas— que ninguna forma básica describe.

Lo que solo puede el recorte

Aceptar eventos de puntero solo dentro de la forma. Un elemento recortado con clip-path no responde al clic fuera de la región recortada: la detección de impacto respeta el recorte. Con mask, en cambio, la caja sigue entera a efectos de eventos, y un elemento enmascarado a la mitad sigue interceptando clics en la parte invisible.

Esa diferencia es la que decide en un montón de casos. Una tarjeta con la esquina cortada en diagonal recortada con clip-path deja pasar el clic a lo que hay debajo en la esquina; enmascarada, lo intercepta. La primera es casi siempre la que quieres.

Describirse con geometría y no con una imagen. Una forma en clip-path es una expresión que el motor evalúa; una máscara es una imagen que hay que generar y almacenar. Para una forma simple, el recorte gasta menos memoria y menos ancho de banda.

El coste

Los dos son operaciones sobre el resultado del pintado y los dos obligan a componer el elemento aparte, así que ninguno es gratis. Pero no cuestan lo mismo.

Un clip-path con una forma básica se evalúa analíticamente contra cada píxel del borde. No hay nada que almacenar y la región interior no requiere ninguna operación por píxel.

Una mask requiere generar el mapa de píxeles de la máscara, con su propio coste de rasterización si es un degradado o su propia descarga si es una imagen, guardarlo en memoria, y después multiplicarlo canal a canal contra el elemento. Es más trabajo y más memoria.

La regla que se deriva: si la forma es geométrica y los bordes son duros, usa clip-path. Reserva mask para lo que de verdad necesita alfa intermedio.