Propriedade Mix-blend-mode
Última atualização: 2026-09-13
mix-blend-mode Propriedade Mix-blend-mode
A propriedade mix-blend-mode controla como o conteúdo de um elemento mistura suas cores com o conteúdo abaixo dele (um fundo ou elementos adjacentes), semelhante aos modos de mesclagem de camadas do Photoshop. Ela permite que textos e imagens produzam composição rica de cores sobre um fundo e é frequentemente usada em pôsteres, banners e design de páginas artísticas.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity | Palavra-chave | O modo de mesclagem |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| mix-blend-mode | ✓ v30 | ✓ v12 | ✓ v30 | ✓ v9 | ✓ v16 |
| Suportado em todos os principais navegadores | |||||
Dica： O multiply torna o branco transparente, então logotipos brancos se fundem em um fundo colorido; o screen faz o oposto, tornando o preto transparente.
Importante： A mesclagem depende do conteúdo abaixo do elemento. Se o elemento estiver dentro de seu próprio contexto de empilhamento sem nada abaixo, nenhum efeito de mesclagem é visível.
❓ Perguntas Frequentes
QQual é a diferença entre mix-blend-mode e background-blend-mode?
AO mix-blend-mode mistura o conteúdo de um elemento (incluindo seu fundo) com tudo abaixo dele — uma mesclagem entre elementos. O background-blend-mode apenas mistura várias camadas de fundo dentro do mesmo elemento. Use mix-blend-mode para fundir texto com uma imagem de fundo e background-blend-mode para misturar várias imagens de fundo entre si.
QPor que meu mix-blend-mode não mostra nenhum efeito visual no CSS?
ACausas comuns: não há conteúdo misturável abaixo do elemento; o próprio elemento ou um pai cria seu próprio contexto de empilhamento, limitando o escopo da mesclagem; ou o elemento está totalmente transparente ou completamente coberto pelo conteúdo abaixo. Adicione isolation: isolate ao pai para definir o escopo de isolamento explicitamente e verifique se realmente existe conteúdo misturável abaixo.
QQuando devo usar os modos de mesclagem multiply e screen no CSS?
AO multiply é amigável ao branco — o branco permanece inalterado quando misturado — por isso convém para marcar com marca d'água um logotipo branco sobre um fundo colorido. O screen é o oposto: o preto não tem efeito, então convém para sobrepor conteúdo escuro em um fundo claro. Outros comuns: overlay é bom para misturar texto com imagens e difference pode criar efeitos artísticos de inversão de cor.
QQuão boa é a compatibilidade do mix-blend-mode com navegadores, especialmente no mobile?
ANavegadores modernos de desktop (Chrome, Firefox, Safari, Edge) têm suporte completo desde cerca de 2015, mas versões antigas e alguns mecanismos WebView diferem, e a mesclagem pode estar ausente ou inconsistente. No mobile, tanto o iOS Safari quanto o Chrome para Android dão suporte. Para visuais críticos, forneça uma alternativa que não dependa da mesclagem.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
