CSS propriedade mix-blend-mode

Definição e uso

A propriedade mix-blend-mode determina como o conteúdo do elemento deve ser misturado com o fundo do pai direto.

Veja também:

Manual de referência do CSS:Propriedade background-blend-mode CSS

Exemplo

Um contêiner com fundo vermelho e uma imagem que se mistura com este contêiner (escuro):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

Experimente pessoalmente

Mais exemplos TIY podem ser encontrados na parte inferior da página.

Sintaxe do CSS

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Valor do atributo

Valores Descrição
normal Este é o valor padrão. Defina o modo de mistura para normal.
multiplicação Defina o modo de mistura para multiplicação.
tela Defina o modo de mistura para tela.
sobreposição Defina o modo de mistura para sobreposição.
escurecer Defina o modo de mistura para escurecer.
clarear Defina o modo de mistura para clarear.
desvio de cor Defina o modo de mistura para desvio de cor.
queima de cor Defina o modo de mistura para queima de cor.
diferença Defina o modo de mistura para diferença.
exclusão Defina o modo de mistura para exclusão.
matiz Defina o modo de mistura para matiz.
saturação Defina o modo de mistura para saturação.
cor Defina o modo de mistura para cor.
luminosidade Defina o modo de mistura para luminosidade.

Detalhes técnicos

Valor padrão: normal
Herança: Não
Produção de animação: Não suportado. Veja também:Propriedades relacionadas à animação.
Sintaxe do JavaScript: object.style.mixBlendMode = "darken"

Mais exemplos

Exemplo

Demonstra todos os valores:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Experimente pessoalmente

Exemplo

Use mix-blend-mode para criar texto cutout/knockout responsivo (textura de recorte):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0