Propriedade Background Blend Mode
Última atualização: 2026-09-13
background-blend-mode Propriedade Background Blend Mode
A propriedade background-blend-mode define o modo de mesclagem entre as imagens de fundo de um elemento, e entre as imagens de fundo e a cor de fundo. Ela suporta modos como multiply, screen e overlay, semelhante à mesclagem de camadas do Photoshop. Adicionada no CSS3, é ótima para ricos efeitos visuais.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
background-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 | Modo de mesclagem do fundo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-blend-mode | ✓ v30 | ✓ v12 | ✓ v30 | ✓ v9 | ✓ v16 |
| Suportado em todos os principais navegadores | |||||
Dica： Defina vários modos de mesclagem separados por vírgulas para corresponder a várias imagens de fundo, por exemplo, background-blend-mode: multiply, screen;.
Aviso： O background-blend-mode não mescla o elemento com outros conteúdos da página; use mix-blend-mode para mesclar entre elementos.
❓ Perguntas Frequentes
QQual é a diferença entre background-blend-mode e mix-blend-mode?
AO background-blend-mode mescla as próprias camadas de fundo de um elemento — imagens de fundo entre si e com a cor de fundo. O mix-blend-mode mescla o próprio elemento com o conteúdo da página abaixo dele. O primeiro atua nas camadas de fundo internas do elemento; o segundo atua entre o elemento inteiro e o resto da página. Para escurecer uma imagem de fundo e melhorar a legibilidade do texto, o background-blend-mode é suficiente.
QQuais modos de mesclagem são mais usados?
Amultiply multiplica as cores e escurece o resultado, ótimo para sobrepor tons escuros em texturas claras ou escurecer um fundo para legibilidade do texto. screen clareia, sendo adequada para efeitos de brilho. overlay combina ambos para aumentar o contraste. darken/lighten escolhem os extremos por canal, e difference cria efeitos criativos de inversão. Em geral, os resultados são semelhantes à mesclagem de camadas do Photoshop.
QQuais valores o background-blend-mode suporta?
ASuporta 16 valores: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color e luminosity.
QComo escurecer uma imagem de fundo com mesclagem para o texto ficar legível?
AUse multiply com uma cor de fundo escura: background-image: url(bg.jpg); background-color: rgba(0,0,0,.5); background-blend-mode: multiply;. Multiplicar pela cor escura escurece a imagem e eleva o contraste do texto. O IE não suporta mesclagem, então mantenha uma cor sólida como fallback.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
