Découper une image ou un bloc selon une forme qui n'est pas un simple rectangle, un cercle ou un polygone, comme une texture déchirée, une silhouette complexe ou un dégradé de transparence progressif, dépasse largement ce que clip-path peut faire. C'est exactement le rôle de mask : utiliser une image, en niveaux de gris ou avec un canal de transparence, comme un pochoir pour décider quelles zones d'un élément restent visibles.
C'est une propriété puissante mais peu connue, souvent découverte tardivement par des développeurs qui cherchaient une solution à un habillage impossible à obtenir autrement en CSS pur.
Définition
mask, et plus précisément mask-image, applique une image comme masque sur un élément : les zones opaques ou blanches de cette image laissent apparaître l'élément normalement, les zones transparentes ou noires le rendent invisible, et les zones intermédiaires créent une transparence progressive. L'image source peut être un fichier, PNG ou SVG, ou Dégradé CSS généré directement en CSS.
Syntaxe de base
.photo {
mask-image: url("etoile.svg");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}La syntaxe reprend volontairement le vocabulaire de background-image : mask-size, mask-repeat et mask-position fonctionnent exactement de la même façon que leurs équivalents pour un arrière-plan, ce qui rend la propriété rapide à apprendre une fois cette parenté comprise.
Masquer avec un dégradé
Un usage très courant consiste à masquer avec un dégradé plutôt qu'une image externe, pour créer un effet de fondu progressif, par exemple un texte ou une image qui s'estompe doucement vers le bas.
.fondu {
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}Ici, aucun fichier image n'est nécessaire : le dégradé lui-même sert de pochoir, opaque sur les premiers 60% de la hauteur, puis progressivement transparent jusqu'au bas de l'élément.
Différence avec clip-path
clip-path et mask répondent à un besoin voisin mais pas identique. clip-path découpe selon une forme vectorielle simple, définie par des coordonnées (cercle, polygone, chemin), avec une frontière toujours nette entre visible et invisible. mask utilise une image comme pochoir, ce qui autorise des transitions progressives, des textures complexes, et des formes bien plus riches qu'un simple tracé géométrique.
| Critère | clip-path | mask |
|---|---|---|
| Source de la forme | Coordonnées géométriques | Image, SVG ou dégradé |
| Transparence progressive | Non, frontière nette | Oui, zones intermédiaires possibles |
| Coût de performance | Faible | Plus élevé sur de grandes zones |
Différence avec le <mask> SVG
Le langage SVG possède lui aussi un élément <mask>, plus ancien et plus puissant sur certains points : il permet de combiner plusieurs formes, des dégradés SVG natifs, et de réutiliser le même masque sur plusieurs éléments via un identifiant. La propriété CSS mask peut d'ailleurs pointer directement vers un masque SVG défini ailleurs dans le document.
.icone {
mask: url("#mon-masque-svg");
}En pratique, la propriété CSS mask suffit pour la grande majorité des effets d'habillage courants, tandis que le <mask> SVG reste réservé à des besoins plus spécifiques, en particulier quand le masque doit être partagé entre plusieurs éléments ou animé finement.
FAQ
mask fonctionne-t-il de la même façon dans tous les navigateurs ?Le support est large aujourd'hui, mais certaines versions ont longtemps nécessité le préfixe -webkit-mask, en particulier sur Safari : il reste prudent de vérifier la compatibilité exacte avant de s'appuyer dessus pour un élément essentiel de l'interface.
transition ou une animation CSS ?Oui, mask-position ou mask-size peuvent être animés comme n'importe quelle autre propriété, ce qui permet par exemple de faire glisser un pochoir sur une image pour un effet de révélation progressive au survol.
Oui par défaut : mask agit uniquement sur le rendu visuel, pas sur la zone interactive de l'élément, qui garde sa forme rectangulaire d'origine pour les clics, sauf si elle est combinée avec pointer-events ou un découpage supplémentaire.