Mesclando Imagens com CSS cross-fade()

Compor duas imagens em CSS sem marcação extra ou JavaScript costumava significar empilhar elementos com position: absolute e manipular valores de opacity em cada um. A função cross-fade() elimina completamente essa sobrecarga ao produzir um único valor <image> mesclado diretamente na sua folha de estilos.

O Que CSS cross-fade() Realmente Faz

cross-fade() é uma função CSS geradora de imagens definida na especificação CSS Images Level 4. Ela recebe duas ou mais imagens — arquivos bitmap, gradientes, SVGs ou cores sólidas — mescla-as com pesos especificados e produz um único valor <image>. Como a saída é um tipo de imagem, você pode usá-la em qualquer lugar onde CSS espera uma: background-image, mask-image ou a propriedade content em pseudo-elementos.

Essa distinção é importante. Diferentemente de sobrepor dois valores background-image e aplicar background-blend-mode, cross-fade() compõe as entradas em um único resultado antes da renderização. Sem nós DOM extras, sem efeitos colaterais de contexto de empilhamento.

Como Funcionam os Pesos Percentuais

Cada argumento aceita uma percentagem opcional que controla quão opaca aquela entrada é na mesclagem final. Algumas regras governam a matemática:

• Nenhuma percentagem declarada: as entradas compartilham igualmente. Duas imagens recebem 50% cada; três imagens recebem ~33,3% cada.
• Algumas percentagens omitidas: o navegador soma os valores declarados, subtrai de 100% e distribui o restante igualmente entre as entradas não especificadas.
• Soma excede 100%: o restante é negativo, então qualquer entrada não especificada é tratada como 0% (totalmente transparente).
• Soma está abaixo de 100%: o déficit age como uma camada transparente invisível preenchendo a lacuna.

/* Mesclagem igual — nenhuma percentagem necessária */
cross-fade(url(a.jpg), url(b.jpg)) /* 50% / 50% */

/* Mesclagem ponderada */
cross-fade(url(a.jpg) 70%, url(b.jpg) 30%)

/* Três entradas, uma não especificada — recebe o restante (30%) */
cross-fade(url(a.jpg) 40%, url(b.jpg) 30%, url(c.jpg))

Sintaxe da Especificação vs. Implementação WebKit

É aqui que as coisas ficam irregulares. A especificação CSS Images Level 4 define cross-fade() com suporte para múltiplas entradas e percentagens independentes por entrada. A implementação WebKit mais antiga — ainda o que navegadores baseados em Chromium e Safari realmente renderizam — aceita exatamente dois argumentos e uma percentagem aplicada apenas à primeira imagem.

No início de 2026: navegadores baseados em Chromium suportam a sintaxe legada prefixada com -webkit-. O Safari suporta tanto a sintaxe legada prefixada quanto não prefixada. O Firefox não implementa cross-fade() de forma alguma. Você pode verificar o status atual no WebStatus.

Use @supports para sobrepor ambas as sintaxes com um fallback sólido:

/* Fallback base — todos os navegadores */
.hero {
  background-image: url('fallback.jpg');
}

/* Sintaxe legada WebKit — Chrome, Safari */
@supports (background-image: -webkit-cross-fade(url(a), url(b), 50%)) {
  .hero {
    background-image: -webkit-cross-fade(
      url('photo.jpg'),
      linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)),
      60%
    );
  }
}

/* Sintaxe da especificação — voltada para o futuro */
@supports (background-image: cross-fade(url(a) 50%, url(b))) {
  .hero {
    background-image: cross-fade(
      url('photo.jpg') 60%,
      linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))
    );
  }
}

Casos de Uso Práticos para Mesclagem de Imagens CSS

A composição de imagens CSS com cross-fade() é mais útil quando você deseja um efeito visual sem adicionar marcação:

• Colorização de imagem: mescle uma foto com uma cor sólida ou gradiente para aplicar uma tonalidade de marca diretamente em CSS.
• Sobreposições de gradiente: sobreponha um gradiente escurecedor sobre uma imagem hero para legibilidade de texto sem um pseudo-elemento.
• Efeitos de textura leves: mescle uma textura SVG com um fundo de cor plana.

Para o que não é bem adequado: transições animadas entre imagens em um temporizador. Para isso, animações de keyframe de opacity em elementos empilhados continuam sendo a abordagem mais compatível e controlável.

cross-fade() vs. Ferramentas CSS Relacionadas

Nota de Acessibilidade

Imagens de fundo — incluindo aquelas produzidas por cross-fade() — são invisíveis para leitores de tela. Se a imagem mesclada transmite significado crítico para a página, represente esse conteúdo no HTML em vez disso, e garanta contraste de cor suficiente entre qualquer texto e o fundo mesclado.

Conclusão

cross-fade() é uma ferramenta focada: ela compõe imagens no nível da folha de estilos, mantém sua marcação limpa e funciona hoje no Chromium e Safari com o prefixo -webkit-. Escreva o fallback primeiro, sobreponha o bloco @supports por cima, e você terá uma solução de mesclagem de imagens CSS progressivamente aprimorada que degrada graciosamente no Firefox até que o suporte seja implementado.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..