background-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.

A propriedade CSS background-blend-mode descreve como as imagens de fundo do elemento devem se misturar entre si e a cor de fundo do elemento.

css
/* Um valor */
background-blend-mode: normal;

/* Dois valores, um por fundo */
background-blend-mode: darken, luminosity;

/* Valores globais */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

Os modos de mistura devem ser definidos na mesma ordem que a propriedade CSS background-image. Se os comprimentos da lista dos modos de mistura e das imagens de fundo não forem iguais, ele será repetido e/ou truncado até que os comprimentos correspondam.

Initial valuenormal
Aplica-se aAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line.
Inheritednão
Computed valueas specified
Animation typeNot animatable

Sintaxe

Valores

<blend-mode>

É um <blend-mode> denotando o modo de mesclagem a ser aplicado. Pode haver vários valores, separados por vírgulas.

Sintaxe formal

background-blend-mode = 
<mix-blend-mode>#

Exemplos

Especificações

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

Compatibilidade com navegadores

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
background-blend-mode

Legend

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

Full support
Full support

Veja também