mix-blend-mode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

La propriété mix-blend-mode 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.

Exemple interactif

Syntaxe

css
/* Valeurs de type <blend-mode> */
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;

Valeurs

<blend-mode>

Indique comment la fusion des modes doit intervenir (cf. <blend-mode>).

Définition formelle

Valeur initialenormal
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationNot animatable
Crée un contexte d'empilementoui

Syntaxe formelle

mix-blend-mode = 
<blend-mode> |
plus-darker |
plus-lighter

<blend-mode> =
normal |
multiply |
screen |
overlay |
darken |
lighten |
color-dodge |
color-burn |
hard-light |
soft-light |
difference |
exclusion |
hue |
saturation |
color |
luminosity

Exemples

Exemple avec SVG

SVG

html
<svg>
  <circle cx="40" cy="40" r="40" fill="red" />
  <circle cx="80" cy="40" r="40" fill="lightgreen" />
  <circle cx="60" cy="80" r="40" fill="blue" />
</svg>

CSS

css
circle {
  mix-blend-mode: screen;
}

Résultat

Exemple avec HTML

HTML

html
<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>

CSS

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;
}

Résultat

Spécifications

Specification
Compositing and Blending Level 2
# mix-blend-mode

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mix-blend-mode
plus-darker
Experimental
plus-lighter
On SVG elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

Voir aussi