CSS masking (mask, mask-image, mask-composite) unprefixed

Baseline 2023 (Chrome 120, Safari 15.4, Firefox 53); disponible de forma generalizada.

Chrome 120Edge 120Safari 15.4Firefox 53

`mask` sin prefijo permite desvanecer, recortar y dar forma a cualquier elemento con gradientes o imágenes; las máscaras combinadas (`mask-composite`) producen anillos, muescas y bordes suaves sin DOM extra.

CSS

.fx-022 {
  width: 100%;
  max-width: 400px;
  display: block;
  border-radius: 12px;
    mask: linear-gradient(#000 60%,transparent),radial-gradient(circle at 85% 20%,transparent 40px,#000 41px);
    mask-composite: intersect
}

HTML

<div class="fx-022" style="aspect-ratio:16/10;background:linear-gradient(135deg,#dbeaff,#ece0ff)"></div>

Fallback: WebKit muy antiguo necesita `-webkit-mask`; los navegadores evergreen van bien sin prefijo.

Fuente: developer.mozilla.org/en-US/docs/Web/CSS/mask

Prompt

Usa `mask` / `mask-image` sin prefijo con gradientes para desvanecidos y recortes (p. ej. `mask: linear-gradient(#000 70%, transparent)` para un desvanecido inferior), y `mask-composite: intersect|exclude` para combinar capas. Prefiere las máscaras a divs superpuestos y pseudoelementos para desvanecer bordes de contenido y efectos de sombra de scroll.