Propriété CSS mix-blend-mode

La propriété CSS mix-blend-mode contrôle la façon dont le contenu d'un élément se mélange avec le contenu derrière lui — généralement la background-color, la background-image de son parent, ou un autre élément qui se chevauche. Au lieu qu'une couche recouvre simplement l'autre, le navigateur combine leurs pixels avec une formule mathématique (multiply, screen, difference, etc.), de la même façon que les modes de fusion fonctionnent dans Photoshop.

Cette page explique ce que fait chaque mode de fusion, dans quels cas le contexte d'empilement est important, et fournit des exemples interactifs pour les valeurs les plus utiles.

Comment fonctionne la fusion

Pour que la fusion soit visible, il faut que deux couches se chevauchent — par exemple un <img> par-dessus un <div> coloré. Le mode de fusion mélange alors les pixels du premier plan avec les pixels de l'arrière-plan :

multiply assombrit — le blanc du premier plan disparaît, les zones sombres restent. Idéal pour les ombres et les teintes.
screen éclaircit — le noir disparaît, les zones claires restent. C'est l'inverse de multiply.
overlay combine les deux : il assombrit les zones sombres et éclaircit les zones claires, augmentant ainsi le contraste.
difference / exclusion soustraient les couleurs, produisant des effets inversés à fort contraste.
hue, saturation, color, luminosity mélangent un canal du premier plan (sa teinte, sa saturation, etc.) avec le reste de l'arrière-plan — utile pour recolorer des images.

Il existe 16 modes de fusion au total (listés dans le tableau Valeurs ci-dessous).

Contexte d'empilement et isolation

Définir toute valeur autre que normal crée un nouveau contexte d'empilement sur l'élément. L'élément se fusionne uniquement avec le contenu à l'intérieur de ce contexte d'empilement — il ne se fusionnera pas avec ce qui se trouve en dehors. C'est ce qui empêche un élément fusionné de déborder sur toute la page.

Pour cette raison, toute propriété qui établit un contexte d'empilement (comme opacity inférieure à 1, transform, ou position avec un z-index) peut modifier le résultat de fusion. Pour empêcher délibérément un élément de se fusionner avec ce qui se trouve derrière lui, donnez à un ancêtre la propriété isolation: isolate — cela crée un nouveau contexte d'empilement afin que la fusion reste contenue.

Astuce

If you want to blend an element's background images together, you can use the background-blend-mode property.

Initial Value	normal
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.mixBlendMode = "exclusion";

Syntaxe

Syntaxe de la propriété CSS mix-blend-mode

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Exemple de la propriété mix-blend-mode :

Exemple de la propriété CSS mix-blend-mode avec la valeur multiply

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété mix-blend-mode avec la valeur "screen" :

Exemple de la propriété CSS mix-blend-mode avec la valeur screen

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété mix-blend-mode avec la valeur "color-dodge" :

Exemple de la propriété CSS mix-blend-mode avec la valeur color-dodge

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété mix-blend-mode avec la valeur "hue" :

Exemple de la propriété CSS mix-blend-mode avec la valeur hue

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété mix-blend-mode avec la valeur "normal" :

Propriété CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété mix-blend-mode avec la valeur "hard-light" :

Propriété CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété mix-blend-mode avec la valeur "difference" :

Propriété CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
normal	Aucune fusion — l'élément est peint normalement par-dessus l'arrière-plan. C'est la valeur par défaut.
multiply	Multiplie les couleurs ; le résultat est toujours plus sombre. Le blanc n'a aucun effet, le noir reste noir.
screen	Inverse, multiplie, puis inverse à nouveau ; le résultat est toujours plus clair. C'est l'opposé de `multiply`.
overlay	`multiply` sur les zones sombres et `screen` sur les zones claires — augmente le contraste.
darken	Conserve la couleur la plus sombre des deux pour chaque canal.
lighten	Conserve la couleur la plus claire des deux pour chaque canal.
color-dodge	Éclaircit l'arrière-plan pour refléter la couleur du premier plan.
color-burn	Assombrit l'arrière-plan pour refléter la couleur du premier plan.
hard-light	Comme `overlay` mais avec les couches inversées — un effet de projecteur intense.
soft-light	Une version plus douce de `hard-light`, comme un projecteur diffus.
difference	Soustrait la couleur la plus sombre de la plus claire ; des couleurs égales produisent du noir.
exclusion	Similaire à `difference` mais avec un contraste plus faible.
hue	Teinte du premier plan avec la saturation et la luminosité de l'arrière-plan.
saturation	Saturation du premier plan avec la teinte et la luminosité de l'arrière-plan.
color	Teinte et saturation du premier plan avec la luminosité de l'arrière-plan — recolore tout en conservant les détails.
luminosity	Luminosité du premier plan avec la teinte et la saturation de l'arrière-plan.
initial	Définit la propriété à sa valeur par défaut (`normal`).
inherit	Hérite de la valeur de l'élément parent.

Propriétés associées

background-blend-mode — fusionne les propres couches d'arrière-plan d'un élément (images et couleur) entre elles, plutôt qu'avec ce qui se trouve derrière l'élément.
isolation — crée un contexte d'empilement afin qu'une fusion reste contenue.
opacity et filter — d'autres façons de modifier la manière dont un élément est composité.

Pratique

Que se passe-t-il lorsque vous définissez mix-blend-mode sur une valeur autre que 'normal' ?

Un nouveau contexte d'empilement est créé sur l'élémentL'élément se fusionne également avec le contenu en dehors de son contexte d'empilementLes images d'arrière-plan de l'élément se fusionnent entre ellesRien ne change sauf si opacity est également définie

Pratique

Quel mode de fusion produit toujours un résultat plus sombre, où le blanc du premier plan n'a aucun effet ?

multiplyscreennormalluminosity