---
title: mix-blend-mode
slug: Web/CSS/mix-blend-mode
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/mix-blend-mode
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>mix-blend-mode</code></strong> définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.</p>

<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;blend-mode&gt; */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Valeurs globales */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;blend-mode&gt;</code></dt>
 <dd>Indique comment la fusion des modes doit intervenir (cf. {{cssxref("&lt;blend-mode&gt;")}}).</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

<div class="hidden" id="mix-blend-mode">
<pre class="brush: html">&lt;div class="grid"&gt;
  &lt;div class="col"&gt;
    &lt;div class="note"&gt;Blending isolé (pas de blending avec l'arrière-plan)&lt;/div&gt;
    &lt;div class="row isolate"&gt;
      &lt;div class="cell"&gt; normal
        &lt;div class="container normal"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;defs&gt;
                &lt;linearGradient id="red"&gt;
                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
                &lt;/linearGradient&gt;
                &lt;linearGradient id="green"&gt;
                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
                &lt;/linearGradient&gt;
                &lt;linearGradient id="blue"&gt;
                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
                &lt;/linearGradient&gt;
              &lt;/defs&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; multiply
        &lt;div class="container multiply"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; darken
        &lt;div class="container darken"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; screen
        &lt;div class="container screen"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; lighten
        &lt;div class="container lighten"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; overlay
        &lt;div class="container overlay"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; color-dodge
        &lt;div class="container color-dodge"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; color-burn
        &lt;div class="container color-burn"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; hard-light
        &lt;div class="container hard-light"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; soft-light
        &lt;div class="container soft-light"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; difference
        &lt;div class="container difference"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; exclusion
        &lt;div class="container exclusion"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; hue
        &lt;div class="container hue"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; saturation
        &lt;div class="container saturation"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; color
        &lt;div class="container color"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; luminosity
        &lt;div class="container luminosity"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="note"&gt;Blending étendu (avec l'arrière-plan)&lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt; normal
        &lt;div class="container normal"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; multiply
        &lt;div class="container multiply"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; darken
        &lt;div class="container darken"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; screen
        &lt;div class="container screen"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; lighten
        &lt;div class="container lighten"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; overlay
        &lt;div class="container overlay"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; color-dodge
        &lt;div class="container color-dodge"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; color-burn
        &lt;div class="container color-burn"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; hard-light
        &lt;div class="container hard-light"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; soft-light
        &lt;div class="container soft-light"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; difference
        &lt;div class="container difference"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; exclusion
        &lt;div class="container exclusion"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; hue
        &lt;div class="container hue"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; saturation
        &lt;div class="container saturation"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; color
        &lt;div class="container color"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt; luminosity
        &lt;div class="container luminosity"&gt;
          &lt;div class="group"&gt;
            &lt;div class="item firefox"&gt;&lt;/div&gt;
            &lt;svg viewBox="0 0 150 150"&gt;
              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html,body {
  height: 100%;
  box-sizing: border-box;
  background: #EEE;
}

.grid {
  width: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em .5em 0;
  font: .8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  position: relative;
  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.R {
  transform-origin: center;
  transform: rotate(-30deg);
  fill: url(#red);
}

.G {
  transform-origin: center;
  transform: rotate(90deg);
  fill: url(#green);
}

.B {
  transform-origin: center;
  transform: rotate(210deg);
  fill: url(#blue);
}

.isolate .group { isolation: isolate; }

.normal .item      { mix-blend-mode: normal; }
.multiply .item    { mix-blend-mode: multiply; }
.screen .item      { mix-blend-mode: screen; }
.overlay .item     { mix-blend-mode: overlay; }
.darken .item      { mix-blend-mode: darken; }
.lighten .item     { mix-blend-mode: lighten; }
.color-dodge .item { mix-blend-mode: color-dodge; }
.color-burn .item  { mix-blend-mode: color-burn; }
.hard-light .item  { mix-blend-mode: hard-light; }
.soft-light .item  { mix-blend-mode: soft-light; }
.difference .item  { mix-blend-mode: difference; }
.exclusion .item   { mix-blend-mode: exclusion; }
.hue .item         { mix-blend-mode: hue; }
.saturation .item  { mix-blend-mode: saturation; }
.color .item       { mix-blend-mode: color; }
.luminosity .item  { mix-blend-mode: luminosity; }</pre>
</div>

<div>{{EmbedLiveSample("mix-blend-mode", "100%", 500, "", "", "example-outcome-frame")}}</div>

<h3 id="Exemple_avec_SVG">Exemple avec SVG</h3>

<h4 id="SVG">SVG</h4>

<pre class="brush: html">&lt;svg&gt;
  &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
  &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
  &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
&lt;/svg&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush:css">circle {
  mix-blend-mode: screen;
}</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample("Exemple_avec_SVG", "100%", "180")}}</p>

<h3 id="Exemple_avec_HTML">Exemple avec HTML</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="isolate"&gt;
  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;
}</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample("Exemple_avec_HTML", "100%", "180")}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode')}}</td>
   <td>{{Spec2('Compositing')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.mix-blend-mode")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
 <li>{{cssxref("background-blend-mode")}}</li>
</ul>