Mix-blend-mode - CSS-Tricks | CSS Almanac 2025

A mix-blend-modepropriedade define como o conteúdo de um elemento deve se mesclar com seu fundo. Por exemplo, o texto de um

poderia se misturar com o fundo por trás de maneiras interessantes.

.blend ( mix-blend-mode: exclusion; )

No exemplo acima, o conteúdo foi modificado pelo mix-blend-modepara que as cores do texto sejam excluídas de seu fundo. Este é apenas um dos muitos valores desta propriedade.

Há um problema com o Chrome 58+ em mix-blend-modeque não renderiza em elementos definidos em um transparente . O foi marcado como o problema 711955 no Chrome, que foi atribuído no momento da redação deste documento. Nesse ínterim, uma solução simples é atribuir uma cor de fundo branca (ou realmente qualquer) ao elemento do corpo.

Valores

initial: a configuração padrão da propriedade que não define um modo de mesclagem.
inherit: um elemento herdará o modo de mesclagem de seu elemento pai.
unset: remove o modo de mesclagem atual de um elemento.
: este é o atributo de um dos modos de mesclagem abaixo:
normal: este atributo não se aplica a nenhuma mistura.
multiply: o elemento é multiplicado pelo fundo e substitui a cor do fundo. A cor resultante é sempre tão escura quanto o fundo.
screen: multiplica o fundo e o conteúdo e complementa o resultado. Isso resultará em um conteúdo mais brilhante do que o background-color.
sobreposição: multiplica ou filtra o conteúdo dependendo da cor de fundo. Este é o inverso do modo de mistura de luz forte.
escurecer: o fundo é substituído pelo conteúdo onde o conteúdo é mais escuro, caso contrário, fica como estava.
lighten: o fundo é substituído pelo conteúdo onde o conteúdo é mais claro.
color-dodge: este atributo ilumina a cor de fundo para refletir a cor do conteúdo.
color-burn: isto escurece o fundo para refletir a cor natural do conteúdo.
hard-light: dependendo da cor do conteúdo este atributo irá filtrar ou multiplicar.
soft-light: dependendo da cor do conteúdo irá escurecê-lo ou clarear.
difference: subtrai a mais escura das duas cores da cor mais clara.
exclusion: semelhante, differencemas com menor contraste.
hue: cria uma cor com o matiz do conteúdo combinado com a saturação e luminosidade do fundo.
saturation: cria uma cor com a saturação do conteúdo combinada com o matiz e a luminosidade do fundo.
color: cria uma cor com o matiz e a saturação do conteúdo e a luminosidade do fundo.
luminosity: cria uma cor com a luminosidade do conteúdo e a matiz e saturação do fundo. Este é o inverso do coloratributo.

É importante notar que definir um modo de mesclagem diferente de normalirá gerar um novo contexto de empilhamento que deve então ser mesclado com o contexto de empilhamento que contém o elemento.

O efeito desses valores é mostrado na demonstração abaixo:

Mais Informações

Noções básicas de modos de combinação CSS
mix-blend-mode no MDN
mix-blend-mode no W3C
Uma coleção de demos do CSS Blend Mode
Conhecendo os modos de combinação CSS

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.