CSS mask
La proprietà CSS mask consente di applicare una maschera visiva agli elementi HTML
La proprietà mask in CSS è una shorthand che permette di definire in un’unica dichiarazione le impostazioni per applicare una maschera visiva a un elemento.
La maschera può essere basata su un'immagine raster (PNG, JPEG), un gradiente CSS o un tracciato SVG, e consente di controllare la visibilità delle diverse aree di un elemento in modo flessibile.
La shorthand mask può includere valori per mask-image, mask-mode, mask-repeat, mask-position, mask-size, mask-origin e mask-clip.
Sintassi
Significato dei valori principali:
- mask-image: L'immagine da usare come maschera (
url('mask.png'), gradiente CSS o tracciato SVG). - mask-mode: Determina come viene interpretata la maschera:
alpha(predefinito) usa la trasparenza,luminanceusa la luminosità dei pixel. - mask-repeat: Stabilisce se la maschera viene ripetuta (
no-repeat,repeat,space,round). - mask-position: Posizione della maschera all'interno dell’elemento (simile a
background-position). - mask-size: Dimensione della maschera (
cover,contain,auto, valori in percentuale o fissi). - mask-origin: Area di riferimento per il posizionamento della maschera (
border-box,padding-box,content-box). - mask-clip: Area dell’elemento alla quale si applica la maschera (
border-box,padding-box,content-box).
Esempio proprietà: mask
Codice Esempio: mask
.mask-box {
width: 300px;
height: 300px;
background: url('https://picsum.photos/id/1015/300/300') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
border-radius: 12px;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}/* Uso di mask shorthand */.mask-element {
mask: radial-gradient(circle at center, white 0%, black 100%) luminance no-repeat center / cover;
-webkit-mask: radial-gradient(circle at center, white 0%, black 100%) luminance no-repeat center / cover;
}/* Per confronto: versione con proprietà esplicite.mask-element {mask-image: radial-gradient(circle at center, white 0%, black 100%);mask-mode: luminance;mask-repeat: no-repeat;mask-position: center;mask-size: cover;}*/
Contenuto Esempio: mask
Esempio di utilizzo della proprietà mask
📌 In questo esempio, viene applicata una maschera SVG a un'immagine per creare un effetto di taglio personalizzato. È tutto scritto in una sola riga con la shorthand mask, più compatta. Include anche la versione prefissata -webkit-mask per compatibilità Safari.
mask luminance📌 In questo esempio, viene applicata una maschera radiale (dal centro verso i bordi, da bianco a nero). Usa mask-mode: luminance per interpretare la luminosità come trasparenza.
CSS e HTML per la maschera visiva:
<style>
.masked-element {
width: 280px;
height: 280px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg');
background-size: cover;
/* Shorthand mask */
mask: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Eo_circle_green_checkmark.svg') no-repeat center / contain;
-webkit-mask: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Eo_circle_green_checkmark.svg') no-repeat center / contain;
}
</style>
<div class="masked-element"></div>
<style>
.mask-container {
background: repeating-conic-gradient(#eee 0% 25%, #ccc 0% 50%) 50% / 40px 40px;
display: flex;
justify-content: center;
align-items: center;
}
.mask-box {
width: 300px;
height: 300px;
background: url('https://picsum.photos/id/1015/300/300') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
border-radius: 12px;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
/* Uso di mask shorthand */
.mask-element {
mask: radial-gradient(circle at center, white 0%, black 100%) luminance no-repeat center / cover;
-webkit-mask: radial-gradient(circle at center, white 0%, black 100%) luminance no-repeat center / cover;
}
/* Per confronto: versione con proprietà esplicite
.mask-element {
mask-image: radial-gradient(circle at center, white 0%, black 100%);
mask-mode: luminance;
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
}
*/
</style>
<div class="mask-container">
<div class="mask-box mask-element">Maschera con mask luminance</div>
</div>
⚠️ Attenzione
Anche sè mask è supportata nei moderni browser: Chrome, Edge, Safari, Firefox.
Serve spesso la versione prefissata -webkit-mask per garantire piena compatibilità, soprattutto su Safari mobile
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
