clip-path y masking

Por defecto todo en CSS es un rectángulo. clip-path te permite recortar el elemento con cualquier forma geométrica o SVG. mask va más lejos: usa imágenes y gradientes como plantilla de visibilidad.

clip-path: recortar con formas

clip-path define el área visible de un elemento. Lo que quede fuera de la forma se recorta (no se ve, aunque el elemento sigue ocupando espacio en el layout).

inset() — rectángulos con esquinas

Recorta desde los bordes. Acepta offset para cada lado y bordes redondeados:

/* Recorta 10px de cada lado */
.recortado {
  clip-path: inset(10px);
}

/* Lado superior, derecho, inferior, izquierdo */
.asimetrico {
  clip-path: inset(0 20px 30px 0);
}

/* Con bordes redondeados */
.redondeado {
  clip-path: inset(0 round 16px);
}

circle()

.avatar {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
}

/* Reveal effect al hacer hover */
.ripple {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.ripple:hover {
  clip-path: circle(100% at 50% 50%);
}

ellipse()

.elipse {
  clip-path: ellipse(60% 40% at 50% 50%);
}

polygon() — cualquier forma poligonal

El más versátil. Define una lista de vértices (x y):

/* Triángulo */
.triangulo {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Flecha a la derecha */
.flecha {
  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);
}

/* Hexágono */
.hexagono {
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%,
    75% 100%, 25% 100%,
    0% 50%
  );
}

/* Efecto "diagonal cut" — popular en diseño moderno */
.diagonal-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

path() — formas SVG

Acepta exactamente la misma sintaxis que el atributo d en SVG:

.custom-shape {
  clip-path: path('M 0 0 L 100 0 Q 100 100 50 100 Q 0 100 0 0');
}

Animar clip-path

Los polígonos se pueden animar, pero la forma de origen y destino deben tener el mismo número de vértices:

.tarjeta {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
}
.tarjeta:hover {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Reveal effect (una imagen que se “desvela” de izquierda a derecha):

@keyframes reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.imagen-reveal {
  animation: reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

mask: visibilidad controlada por imagen

mask es como clip-path pero más potente: usa el canal alpha de una imagen (o un gradiente) para definir las zonas visibles. Donde la máscara es opaca → visible. Donde es transparente → invisible.

mask-image con gradiente

El caso más práctico: hacer que un elemento se desvanezca:

/* Desvanece de sólido a transparente de arriba a abajo */
.fade-bottom {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Desvanece en los laterales — ideal para carruseles */
.fade-sides {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

mask-image con imagen PNG/SVG

/* Usa un SVG como forma de recorte con color personalizable */
.icono-mascara {
  background: linear-gradient(135deg, #667eea, #764ba2);
  mask-image: url('/icons/heart.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 80px;
  height: 80px;
}

Esto permite colorear iconos SVG de cualquier color directamente desde CSS, sin editarlos.

mask-composite

Combina múltiples máscaras:

.doble-fade {
  mask-image:
    linear-gradient(to right, transparent, black),
    linear-gradient(to bottom, transparent, black);
  mask-composite: intersect;
  /* Valores: intersect, subtract, add, exclude */
}

Herramientas de apoyo

Crear polígonos a mano es tedioso. Estas herramientas generan el código:

• bennettfeely.com/clippy — editor visual de clip-path con formas predefinidas.
• Firefox DevTools → inspector → al hacer clic en el valor de clip-path abre el editor visual integrado.

¿Qué hemos aprendido?

• clip-path recorta el elemento con inset, circle, ellipse, polygon o path SVG.
• Los polígonos son animables si tienen el mismo número de vértices.
• mask-image usa una imagen o gradiente como máscara de visibilidad por canal alpha.
• El fade con gradiente + mask-image es uno de los patrones más útiles en UI moderno.

Siguiente paso

En la próxima lección veremos Blend modes: cómo mezclar capas de colores con mix-blend-mode y background-blend-mode.