Propriedade background-blend-mode

A propriedade background-blend-mode define o modo de mistura da imagem de fundo com a cor de fundo ou outras imagens. Nesta propriedade, também é possível especificar vários valores separados por vírgula, que serão aplicados na mesma ordem. Os valores para a propriedade são análogos aos modos principais de editores gráficos.

Sintaxe

seletor {
	background-blend-mode: modos;
}

A tabela apresenta os principais valores para a propriedade background-blend-mode:

Valores

Valor	Descrição
`normal`	Normal. Não usa mistura de cores. Modo padrão.
`multiply`	Multiplicação. Neste modo, o valor da cor primária é multiplicado pelo valor da cor de mistura. A cor resultante é sempre uma cor mais escura.
`screen`	Clareamento. Neste modo, os valores invertidos das cores primária e de mistura são multiplicados. Como cor resultante, sempre se obtém uma cor mais clara.
`overlay`	Sobreposição. Neste modo, as cores são multiplicadas ou clareadas dependendo da cor primária. Padrões ou cores sobrepõem os pixels existentes, deixando as áreas claras e escuras da cor primária inalteradas.

Exemplo

Vejamos como a imagem aparecerá com o valor padrão da propriedade background-blend-mode:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Agora vamos alterar o valor da propriedade background-blend-mode para multiplicação:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos definir o modo de clareamento para a nossa imagem:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo
a propriedade background-image,
com a qual é possível definir uma imagem de fundo para um bloco
a propriedade mix-blend-mode,
com a qual é possível sobrepor cores originais a uma imagem de fundo
a propriedade backdrop-filter,
que permite aplicar filtros