Mezcla de imágenes con CSS cross-fade()

Componer dos imágenes en CSS sin marcado adicional ni JavaScript solía significar apilar elementos con position: absolute y hacer malabares con valores de opacity en cada uno. La función cross-fade() elimina completamente esa sobrecarga al producir un único valor <image> mezclado directamente en tu hoja de estilos.

Qué hace realmente CSS cross-fade()

cross-fade() es una función CSS generadora de imágenes definida en la especificación CSS Images Level 4. Toma dos o más imágenes —archivos bitmap, degradados, SVG o colores sólidos— las mezcla con pesos especificados y genera un único valor <image>. Debido a que la salida es un tipo de imagen, puedes usarla en cualquier lugar donde CSS espere una: background-image, mask-image o la propiedad content en pseudo-elementos.

Esa distinción importa. A diferencia de superponer dos valores background-image y aplicar background-blend-mode, cross-fade() compone las entradas en un único resultado antes del renderizado. Sin nodos DOM adicionales, sin efectos secundarios de contexto de apilamiento.

Cómo funcionan los porcentajes de peso

Cada argumento acepta un porcentaje opcional que controla qué tan opaca es esa entrada en la mezcla final. Algunas reglas rigen las matemáticas:

• Sin porcentajes declarados: las entradas se comparten por igual. Dos imágenes obtienen 50% cada una; tres imágenes obtienen ~33.3% cada una.
• Algunos porcentajes omitidos: el navegador suma los valores declarados, resta del 100% y distribuye el resto equitativamente entre las entradas no especificadas.
• La suma excede el 100%: el resto es negativo, por lo que cualquier entrada no especificada se trata como 0% (completamente transparente).
• La suma está por debajo del 100%: el déficit actúa como una capa transparente invisible que llena el vacío.

/* Mezcla equitativa — no se necesitan porcentajes */
cross-fade(url(a.jpg), url(b.jpg)) /* 50% / 50% */

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

/* Tres entradas, una sin especificar — obtiene el resto (30%) */
cross-fade(url(a.jpg) 40%, url(b.jpg) 30%, url(c.jpg))

Sintaxis de especificación vs. la implementación WebKit

Aquí es donde las cosas se vuelven irregulares. La especificación CSS Images Level 4 define cross-fade() con soporte para múltiples entradas y porcentajes independientes por entrada. La implementación WebKit más antigua —todavía lo que los navegadores basados en Chromium y Safari realmente renderizan— acepta exactamente dos argumentos y un porcentaje aplicado solo a la primera imagen.

A principios de 2026: Los navegadores basados en Chromium admiten la sintaxis heredada con prefijo -webkit-. Safari admite tanto la sintaxis heredada con prefijo como sin prefijo. Firefox no implementa cross-fade() en absoluto. Puedes verificar el estado actual en WebStatus.

Usa @supports para superponer ambas sintaxis con un respaldo sólido:

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

/* Sintaxis WebKit heredada — 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%
    );
  }
}

/* Sintaxis de especificación — orientada al 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ácticos de mezcla de imágenes CSS

La composición de imágenes CSS con cross-fade() es más útil cuando deseas un efecto visual sin agregar marcado:

• Tintado de imágenes: mezcla una foto con un color sólido o degradado para aplicar un tinte de marca directamente en CSS.
• Superposiciones de degradado: superpone un degradado oscurecedor sobre una imagen hero para mejorar la legibilidad del texto sin un pseudo-elemento.
• Efectos de textura ligeros: mezcla una textura SVG con un fondo de color plano.

Para lo que no es adecuado: transiciones animadas entre imágenes con temporizador. Para eso, las animaciones de keyframe de opacity en elementos apilados siguen siendo el enfoque más compatible y controlable.

cross-fade() vs. herramientas CSS relacionadas

Nota de accesibilidad

Las imágenes de fondo —incluidas las producidas por cross-fade()— son invisibles para los lectores de pantalla. Si la imagen mezclada transmite un significado crítico para la página, representa ese contenido en el HTML en su lugar, y asegura un contraste de color suficiente entre cualquier texto y el fondo mezclado.

Conclusión

cross-fade() es una herramienta enfocada: compone imágenes a nivel de hoja de estilos, mantiene tu marcado limpio y funciona hoy en Chromium y Safari con el prefijo -webkit-. Escribe primero el respaldo, superpone el bloque @supports encima, y tendrás una solución de mezcla de imágenes CSS con mejora progresiva que se degrada elegantemente en Firefox hasta que llegue el soporte.

Preguntas frecuentes

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..