`mask și mask-image (măști cu gradient și imagini)` în CSS

Tranziții și Animații CSS3+ (fără prefix: Chrome 120, Firefox 53, Safari 15.4)

Ascunde părți dintr-un element folosind o imagine sau un gradient ca mască: zonele opace rămân vizibile, cele transparente dispar.

Sintaxă CSS

mask-image: linear-gradient(to bottom, black 70%, transparent);
mask-image: url(stea.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask: url(stea.svg) center / contain no-repeat;

Ce face `mask și mask-image (măști cu gradient și imagini)`

mask-image aplică peste element o mască. În modul implicit (alpha), acolo unde masca este opacă elementul se vede, acolo unde este transparentă elementul dispare, iar zonele semitransparente îl fac parțial vizibil. Culoarea măștii nu contează, doar opacitatea ei.

Spre deosebire de clip-path, care taie strict pe contur, masca permite treceri treptate: un gradient de la black la transparent face ca textul sau imaginea să se estompeze spre margine.

Proprietățile mask-size, mask-repeat și mask-position funcționează exact ca echivalentele lor background-*. Scurtătura mask le combină. Până la Chrome 120 era nevoie de prefixul -webkit-mask-image; pentru browsere vechi poți scrie ambele variante.

Valori uzuale

Valoare	Descriere
`mask-image`	Imaginea sau gradientul folosit ca mască (url(), linear-gradient(), radial-gradient()).
`mask-size`	Mărimea măștii: contain, cover, auto sau dimensiuni exacte.
`mask-repeat`	Dacă masca se repetă: repeat, no-repeat, repeat-x, repeat-y.
`mask-position`	Poziția măștii în element (center, top, 50% 20px).
`mask-mode`	alpha (opacitatea contează) sau luminance (luminozitatea contează).
`mask`	Scurtătura pentru toate proprietățile de mai sus.

Exemple

Exemplul 1: Descriere de produs care se estompează spre final

Ultima parte a textului dispare treptat, sugerând că există continuare.

.descriere-scurta {
  max-height: 120px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
  mask-image: linear-gradient(to bottom, black 60%, transparent);
}

Efect vizual în browser

Primele rânduri ale descrierii (de exemplu „Cafetieră espresso, 15 bari, 899 lei...”) se văd normal, iar ultimele 40% din înălțime se estompează până devin invizibile.

Exemplul 2: Iconiță colorată din CSS cu o mască SVG

Forma vine din fișierul SVG, iar culoarea vine din background-color, deci o poți schimba la hover.

.icon-cos {
  width: 24px;
  height: 24px;
  background-color: #475569;
  mask: url(icons/cos.svg) center / contain no-repeat;
}
.icon-cos:hover {
  background-color: #16a34a;
}