CSS

CSS Mask: recortes, fades y texto sin editar imágenes

Aprende a usar `mask-image`, gradientes y SVG para crear recortes visuales, focos y transiciones limpias sin tocar el asset original.

¿Cuánto sabes de CSS?

📘 Teoría

Qué hace realmente una máscara

No modifica el asset: modifica su visibilidad.

Una máscara actúa como una capa intermedia entre el contenido y el render final. Las zonas opacas permanecen visibles y las transparentes desaparecen.

Esto la convierte en una herramienta muy útil para interfaces donde quieres dirigir la atención, suavizar bordes o revelar solo una parte del contenido.

Sirve para imágenes, fondos y bloques completos.
Puedes generarla con gradientes, SVG inline o archivos externos.
Escala mejor que editar una imagen distinta para cada variante.

Gradientes como máscaras: fade, spotlight y franjas

El uso más práctico empieza con `radial-gradient()` y `linear-gradient()`.

Un `linear-gradient()` funciona muy bien para fundidos verticales o laterales. Un `radial-gradient()` es ideal para focos, recortes circulares o zonas de atención.

Cuando necesitas algo más expresivo, puedes combinar varias capas y controlar su escala con `mask-size`, `mask-position` y `mask-repeat`.

Spotlight básico con gradiente radial

.media {
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0 32%, transparent 56%);
  mask-image: radial-gradient(circle at 50% 45%, #000 0 32%, transparent 56%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Máscaras con SVG y texto

Cuando el gradiente se queda corto, SVG te da formas más precisas.

SVG es especialmente útil para letras gigantes, geometrías irregulares o recortes de branding. En vez de exportar variantes raster, puedes mantener el contenido vivo y cambiar solo la máscara.

Este enfoque encaja muy bien en heroes editoriales, portadas de curso y bloques promocionales donde quieres un efecto visual fuerte sin perder flexibilidad.

Texto grande como máscara para titulares visuales.
Formas orgánicas o logos con más control que un gradiente.
Combinación potente con animaciones de scroll y hover.

Compatibilidad y fallback razonable

La técnica es muy útil, pero no debe romper la experiencia.

En navegadores basados en WebKit todavía es habitual declarar tanto `mask-*` como `-webkit-mask-*`. Si el recorte es decorativo, el fallback puede ser simplemente mostrar el contenido completo.

Cuando el efecto es importante para entender la interfaz, conviene envolverlo en `@supports` o degradarlo a una versión más simple con borde redondeado, overlay o clip-path.

Fallback defensivo

.cover {
  border-radius: 24px;
  overflow: hidden;
}

@supports ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  .cover {
    overflow: visible;
    -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
  }
}

Animar clip-path con intención

1 Qué hace realmente una máscara 2 Gradientes como máscaras: fade, spotlight y franjas 3 Máscaras con SVG y texto 4 Compatibilidad y fallback razonable 5 Animar clip-path con intención

🧭 Visuales clave

Cómo funciona una máscara CSS

Explica el modelo mental de `mask`: contenido base, capa de visibilidad y recorte final para entender por qué la imagen no se edita, solo se revela u oculta.

Diagrama que muestra contenido original, máscara y resultado final al aplicar CSS mask.

🧪 Aprende probando

Ejemplo Demo interactiva: generador visual de CSS mask Explora fades, spotlight, franjas y texto recortado para entender cómo cambian `mask-image`, `mask-size` y `mask-position` en tiempo real.

⌄

Ejemplo Demo guiada: tarjeta con fade inferior Aplica una máscara lineal para suavizar el final de una imagen y dejar espacio al texto.

⌄