Propriété CSS background-blend-mode

La propriété CSS background-blend-mode définit comment les images d'arrière-plan d'un élément se fusionnent entre elles et avec la background-color de l'élément. Elle vous permet de combiner des arrière-plans superposés comme un éditeur d'image fusionne des calques — teinter une photo, créer un effet bicolore, ou fondre une texture dans une autre — sans toucher aux fichiers image eux-mêmes.

Cette page couvre ce que fait chaque mode de fusion, comment la fusion fonctionne quand un élément possède plusieurs couches d'arrière-plan, des cas d'utilisation concrets et des exemples interactifs. La valeur par défaut est normal, ce qui signifie qu'il n'y a aucune fusion.

Référence de la propriété


Valeur initiale	`normal`
S'applique à	Tous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritage	Non
Animatable	Non
Version	CSS3
Syntaxe DOM	`object.style.backgroundBlendMode = "luminosity"`

Syntaxe

background-blend-mode: <blend-mode>;

/* Multiple layers */
background-blend-mode: <blend-mode>, <blend-mode>, ...;

Où <blend-mode> est l'un des suivants :

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | hard-light | soft-light |
difference | exclusion | hue | saturation | color | luminosity

Fonctionnement de la fusion en couches

Un élément peut empiler plusieurs couches d'arrière-plan : la liste background-image, plus la background-color peinte en dessous de toutes les couches. background-blend-mode accepte une liste de modes séparés par des virgules qui correspondent, dans l'ordre, aux couches background-image :

Si vous donnez moins de modes que de couches, la liste se répète depuis le début jusqu'à ce que chaque couche ait un mode.
Si vous donnez plus de modes que de couches, les modes supplémentaires sont ignorés.
La background-color est toujours la couche la plus basse et se fusionne avec la couche d'image directement au-dessus d'elle.

/* Two images: the first uses "screen", the second "multiply" */
background-image: url(top.png), url(bottom.png);
background-blend-mode: screen, multiply;

La fusion se produit uniquement entre les arrière-plans du même élément — elle ne fusionne pas avec le contenu visuellement derrière l'élément dans le contexte d'empilement. Pour fusionner un élément avec ce qui se trouve en dessous dans la page, utilisez plutôt mix-blend-mode.

Valeurs

Valeur	Ce qu'elle fait
`normal`	Aucune fusion — la couche supérieure peint par-dessus les couches inférieures (valeur par défaut).
`multiply`	Multiplie les valeurs des canaux de couleur. Le résultat est toujours plus sombre ; le blanc est transparent, le noir reste noir.
`screen`	Inverse de `multiply`. Le résultat est toujours plus clair ; le noir est transparent, le blanc reste blanc.
`overlay`	Applique `multiply` là où la couche inférieure est sombre et `screen` là où elle est claire — augmente le contraste.
`darken`	Conserve le pixel le plus sombre, canal par canal.
`lighten`	Conserve le pixel le plus clair, canal par canal.
`color-dodge`	Éclaircit la couche inférieure pour refléter la couche supérieure, produisant des reflets vifs.
`color-burn`	Assombrit la couche inférieure pour refléter la couche supérieure, intensifiant les ombres.
`hard-light`	Similaire à `overlay` mais avec les rôles de la couche supérieure et inférieure inversés — un fort renforcement du contraste.
`soft-light`	Version plus douce de `overlay` ; préserve les demi-tons, évite les contrastes abrupts.
`difference`	Soustrait la couleur la plus sombre de la plus claire par canal. Les couleurs identiques produisent du noir.
`exclusion`	Similaire à `difference` mais avec moins de contraste ; les demi-tons deviennent gris.
`hue`	Prend la teinte de la couche supérieure, avec la saturation et la luminosité de la couche inférieure.
`saturation`	Prend la saturation de la couche supérieure, avec la teinte et la luminosité de la couche inférieure.
`color`	Prend la teinte et la saturation de la couche supérieure avec la luminosité de la couche inférieure — la méthode standard pour teinter une photo en niveaux de gris.
`luminosity`	Inverse de `color` : prend la luminosité de la couche supérieure avec la teinte et la saturation de la couche inférieure.

Comprendre les familles de modes de fusion

Les 16 modes se regroupent en quatre familles :

Modes d'assombrissement (multiply, darken, color-burn) — le résultat n'est jamais plus clair qu'aucune des sources. Utile pour les ombres portées, l'approfondissement des ombres et l'ajout de teintes sombres.

Modes d'éclaircissement (screen, lighten, color-dodge) — le résultat n'est jamais plus sombre qu'aucune des sources. Utile pour les lueurs, les fuites lumineuses et les effets d'éclaircissement.

Modes de contraste (overlay, hard-light, soft-light) — assombrissent les zones sombres tout en éclaircissant les zones claires, renforçant le contraste global. Soft-light est le plus subtil ; hard-light est le plus agressif.

Modes différence/exclusion (difference, exclusion) — produisent des résultats inversés ou psychédéliques. Principalement utilisés pour des effets créatifs ou des animations ; moins courants dans le travail d'interface.

Modes de composantes (hue, saturation, color, luminosity) — décomposent une couleur en ses composantes HSL et échangent des canaux individuels entre les couches. Ce sont les outils de prédilection pour la recoloration de photos.

Exemples

normal

Aucune fusion — l'image de premier plan est dessinée par-dessus l'image d'arrière-plan sans aucune interaction entre elles.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Essayez vous-même »

screen

Les zones claires restent lumineuses ; les zones sombres de l'image supérieure deviennent transparentes, révélant la couche inférieure. Idéal pour ajouter des lueurs ou des effets de lumière douce.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Essayez vous-même »

color-dodge

Éclaircit la couche inférieure pour refléter la couche supérieure. Produit des résultats vifs et à haute luminosité. Utile pour des effets néon ou de halo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Essayez vous-même »

multiply

Multiplie les valeurs des canaux de couleur, produisant toujours un résultat plus sombre que l'une ou l'autre source. Les zones blanches deviennent transparentes ; les zones noires restent noires. Le choix classique pour ajouter des teintes ou des ombres à une photo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Essayez vous-même »

overlay

Renforce le contraste en appliquant multiply là où la couche inférieure est sombre et screen là où elle est claire. Conserve le caractère tonal de la couche inférieure tout en le faisant ressortir davantage.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Essayez vous-même »

darken

Compare chaque canal de couleur et conserve la valeur la plus sombre. Les deux couches s'affrontent pixel par pixel, et les parties les plus sombres de l'une ou l'autre couche l'emportent toujours.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Essayez vous-même »

saturation

Prend la saturation de la couche supérieure tout en préservant la teinte et la luminosité de la couche inférieure. Utile pour désaturer ou re-saturer des parties d'une photo tout en conservant la palette de couleurs.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Essayez vous-même »

Cas d'utilisation courants

Teinter une photo avec une couleur de marque

Superposez une background-color unie sur une photo et utilisez multiply pour pousser l'image vers cette teinte. Les zones sombres de la photo absorbent la teinte le plus fortement.

.hero {
  background-image: url(photo.jpg);
  background-color: #4f46e5; /* indigo brand color */
  background-blend-mode: multiply;
}

Créer un effet bicolore

Définissez deux arrière-plans en dégradé — un pour les hautes lumières, un pour les ombres — sur une image en niveaux de gris en utilisant screen et multiply :

.duotone {
  background-image:
    linear-gradient(#ff6b6b, #ff6b6b),  /* highlight color */
    linear-gradient(#4f46e5, #4f46e5),  /* shadow color */
    url(photo.jpg);
  background-blend-mode: screen, multiply, normal;
}

La photo en niveaux de gris reçoit à la fois une couche de hautes lumières chaudes (screen) et une couche d'ombres froides (multiply), produisant l'aspect bicolore classique populaire dans les sections héros.

Superposition de texture

Fondez une texture de bruit ou de papier dans une couleur d'arrière-plan unie sans modifier l'asset :

.textured-card {
  background-image: url(noise.png);
  background-color: #f5f0eb;
  background-blend-mode: soft-light;
}

soft-light est généralement le choix le plus doux ici — il ajoute de la texture sans effacer la couleur de base.

Recoloration interactive au survol

Changez le mode de fusion dynamiquement pour créer un effet de survol en CSS pur :

.card {
  background-image: url(photo.jpg);
  background-color: #10b981;
  background-blend-mode: normal;
  transition: background-blend-mode 0s; /* instant switch */
}

.card:hover {
  background-blend-mode: multiply;
}

Remarque : background-blend-mode n'est pas animatable (pas d'états intermédiaires), donc les transitions basculent instantanément plutôt que d'interpoler.

Quand la fusion de tout l'élément est nécessaire

background-blend-mode ne fusionne que les couches à l'intérieur de l'arrière-plan propre à l'élément. Si vous avez besoin de fusionner un élément avec le contenu derrière lui sur la page — par exemple, un overlay en verre dépoli — utilisez plutôt mix-blend-mode.

Pour les ajustements sur une seule image (luminosité, contraste, niveaux de gris) sans avoir besoin d'une seconde couche, la propriété filter est souvent une solution plus simple, et opacity est le bon outil pour estomper l'ensemble de l'élément.

Compatibilité des navigateurs

background-blend-mode est pris en charge dans tous les navigateurs modernes (Chrome, Firefox, Edge, Safari et Opera). Internet Explorer ne l'a jamais pris en charge. Prévoyez un arrière-plan background ordinaire de repli pour les environnements hérités — les arrière-plans non fusionnés affichent les couches empilées normalement sans erreur visible.

/* Fallback first, then enhanced */
.hero {
  background: url(photo.jpg) center / cover #4f46e5;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background-blend-mode: multiply;
  }
}

Exercice

Pratique

Que fait la propriété CSS background-blend-mode ?

Elle définit le mode de mélange de l'image d'arrière-plan et de la couleur d'arrière-plan.Elle ajuste la taille de l'image d'arrière-plan.Elle contrôle le défilement de l'image d'arrière-plan.Elle permet à plusieurs images d'arrière-plan de se fondre les unes dans les autres.Elle détermine la position de l'image d'arrière-plan.