Maîtriser la propriété CSS mask-composite : syntaxe, valeurs et exemples pratiques

Propriété CSS mask-composite : combiner plusieurs masques d'image

La propriété CSS mask-composite permet de définir comment plusieurs couches de masques d'image doivent être combinées entre elles. Cette propriété avancée s'utilise en conjonction avec la propriété mask pour créer des effets de masquage complexes et personnalisés sur vos éléments HTML. Grâce à mask-composite, vous pouvez contrôler précisément la manière dont les différentes couches de masques se superposent et interagissent, offrant ainsi des possibilités créatives infinies pour vos designs web modernes.

Syntaxe générale de mask-composite

La syntaxe de la propriété mask-composite suit la structure standard des propriétés CSS et s'applique directement sur l'élément ciblé :

  element {
    mask-composite: [valeur];
  }
  

Cette propriété accepte une ou plusieurs valeurs séparées par des virgules, correspondant à chaque couche de masque définie dans la propriété mask.

Valeurs possibles et leurs effets

La propriété mask-composite accepte quatre valeurs principales, chacune produisant un effet de composition différent entre les couches de masques :

• add : additionne les couches de masques en combinant leurs valeurs. Cette valeur crée un masque résultant qui montre toutes les zones visibles des différentes couches, idéale pour enrichir progressivement un masque avec des détails supplémentaires
• subtract : soustrait le masque supérieur du masque inférieur. Cette opération retire les zones du masque du dessus de celui du dessous, permettant de créer des découpes et des évidements dans votre masque principal
• intersect : conserve uniquement l'intersection des masques, c'est-à-dire les zones communes à toutes les couches. Très utile pour affiner précisément une zone visible en appliquant plusieurs conditions de masquage simultanées
• exclude : affiche uniquement les parties non-chevauchantes entre les masques. Cette valeur inverse l'effet d'intersection en montrant tout sauf les zones communes, idéale pour créer des effets de découpage complexes

Exemples pratiques commentés

Voici des exemples concrets illustrant l'utilisation de la propriété mask-composite avec différentes valeurs :

Exemple 1 : Addition de masques (add)

Exemple :    📋 Copier le code

  .element-avec-masques-additifs {
    /* Définition de deux couches de masques distincts */
    mask-image: url(masque-principal.png), url(details-supplementaires.png);
    mask-position: center, top left;
    
    /* Addition des deux masques pour un effet cumulatif */
    mask-composite: add;
  }
  

Explication : Dans cet exemple, les deux masques masque-principal.png et details-supplementaires.png sont combinés de manière additive. Le résultat affiche toutes les zones visibles des deux masques, permettant d'enrichir le masque de base avec des détails complémentaires sans les remplacer.

Exemple 2 : Soustraction de masques (subtract)

Exemple :    📋 Copier le code

  .element-avec-decoupe {
    /* Masque de base et masque de découpe */
    mask-image: radial-gradient(circle, black 60%, transparent 60%),
                radial-gradient(circle at 30% 30%, black 20%, transparent 20%);
    
    /* Soustraction : retire le second masque du premier */
    mask-composite: subtract;
  }
  

Explication : Ici, le deuxième masque (petit cercle) est soustrait du premier (grand cercle), créant un effet de découpe ou d'évidement. Cela permet de créer des formes complexes avec des trous, idéal pour des effets de perforation ou de fenêtrage.

Exemple 3 : Intersection de masques (intersect)

Exemple :    📋 Copier le code

  .element-zone-commune {
    /* Deux masques géométriques différents */
    mask-image: linear-gradient(to right, black 50%, transparent 50%),
                linear-gradient(to bottom, black 50%, transparent 50%);
    
    /* Intersection : seule la zone commune reste visible */
    mask-composite: intersect;
  }
  

Explication : L'utilisation d'intersect ne conserve que la zone de chevauchement entre les deux masques (dans cet exemple, le quart supérieur gauche). Cette technique est particulièrement utile pour restreindre progressivement une zone visible en appliquant plusieurs critères de masquage.

Exemple 4 : Exclusion des zones communes (exclude)

Exemple :    📋 Copier le code

  .element-exclusif {
    /* Deux cercles qui se chevauchent partiellement */
    mask-image: radial-gradient(circle at 40%, black 40%, transparent 40%),
                radial-gradient(circle at 60%, black 40%, transparent 40%);
    
    /* Exclusion : masque la zone de chevauchement */
    mask-composite: exclude;
  }
  

Explication : Avec exclude, seules les parties non-chevauchantes des deux masques restent visibles, créant un effet de découpe mutuelle. Cet effet est idéal pour créer des formes en "anneau" ou des motifs de type XOR (ou exclusif).

Conseils et astuces d'utilisation avancés

• Compatibilité navigateurs : La propriété mask-composite nécessite généralement le préfixe -webkit- pour fonctionner dans la plupart des navigateurs modernes. Testez toujours vos masques sur différents navigateurs et utilisez des solutions de repli (fallback) pour garantir une expérience utilisateur cohérente sur tous les supports.
• Ordre des couches : L'ordre de déclaration des masques dans la propriété mask-image est crucial. Le premier masque déclaré se trouve en dessous, et les suivants se superposent au-dessus. Pensez à cet ordre lors de l'utilisation de subtract ou intersect pour obtenir l'effet désiré.
• Utilisation de add : Cette valeur est parfaite pour enrichir progressivement un masque en ajoutant des zones de visibilité supplémentaires. Par exemple, combinez un masque de forme de base avec des masques de détails texturés pour créer des effets de complexité croissante.
• Utilisation de subtract : Idéale pour créer des effets de découpe propres et précis. Utilisez cette valeur pour retirer des sections spécifiques d'un masque principal, comme pour créer des fenêtres, des trous ou des formes négatives complexes.
• Utilisation de intersect : Parfaite pour restreindre une zone de visibilité en appliquant plusieurs conditions. Par exemple, combinez un masque de forme avec un masque de dégradé pour obtenir une forme avec transition de transparence précise.
• Utilisation de exclude : Cette valeur crée des effets visuels uniques où les zones de chevauchement deviennent transparentes. Très efficace pour créer des motifs géométriques complexes ou des effets de superposition inversée.
• Performance : Les masques multiples avec composition peuvent être coûteux en ressources pour le navigateur. Utilisez-les avec parcimonie sur les éléments critiques et évitez d'appliquer des masques complexes sur de grandes surfaces animées pour maintenir des performances optimales.
• Combinaison avec animations : Bien que mask-composite soit animable, les transitions entre différents modes de composition peuvent produire des effets inattendus. Privilégiez plutôt l'animation des positions ou tailles des masques pour des résultats plus fluides et prévisibles.

En maîtrisant la propriété mask-composite, vous débloquez un contrôle granulaire et puissant sur la composition de vos masques d'image. Cette technique avancée permet de créer des effets visuels sophistiqués, des interfaces utilisateur innovantes et des designs web uniques qui se démarquent par leur créativité et leur originalité.

Prise en charge de la propriété dans les navigateurs

Explorateur
Verssion	4 -webkit-	18 -webkit-	53 -webkit-	3.1 -webkit-	15 -webkit-

Valeurs de la propriété css

Par carabde | Mis à jour le 13 novembre 2025