Validación HTML: CSS: "background-blend-mode": X no es un valor de "background-blend-mode".

Acerca de este problema HTML

La propiedad background-blend-mode controla cómo las capas de fondo de un elemento — incluyendo imágenes de fondo y colores de fondo — se fusionan entre sí. Cada valor debe ser una palabra clave de modo de fusión válida según se define en la especificación CSS Compositing and Blending. El validador W3C marca este error cuando encuentra un valor que no coincide con ninguna palabra clave reconocida, lo que puede suceder debido a errores tipográficos, valores inventados, o confusión con propiedades similares como mix-blend-mode.

Aunque los navegadores típicamente ignoran valores CSS no reconocidos y recurren al valor por defecto (normal), depender de este comportamiento es arriesgado. Significa que el efecto de fusión que pretendías simplemente no aparecerá, y la falla silenciosa puede ser difícil de depurar. Corregir los errores de validación asegura que tus estilos funcionen como se esperaba en todos los navegadores.

La lista completa de valores válidos para background-blend-mode es:

normal (por defecto)
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

También puedes especificar múltiples valores separados por comas cuando un elemento tiene múltiples capas de fondo. Cada valor corresponde a una capa de fondo en el mismo orden.

Ejemplos

Valores inválidos

Estos ejemplos provocarán el error de validación:

/* Error tipográfico: "multipley" no es una palabra clave válida */
.hero {
  background-blend-mode: multipley;
}

/* "blend" no es un valor reconocido */
.banner {
  background-blend-mode: blend;
}

/* Los valores numéricos no son aceptados */
.card {
  background-blend-mode: 50%;
}

Valores corregidos

/* Corregido: ortografía correcta */
.hero {
  background-blend-mode: multiply;
}

/* Corregido: usar una palabra clave de modo de fusión válida */
.banner {
  background-blend-mode: overlay;
}

/* Corregido: usar una palabra clave en lugar de un valor numérico */
.card {
  background-blend-mode: soft-light;
}

Múltiples capas de fondo

Cuando tienes múltiples imágenes de fondo, proporciona una lista separada por comas de modos de fusión válidos:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Blend Mode Example</title>
  <style>
    .blended {
      width: 300px;
      height: 200px;
      background-color: teal;
      background-image: url("pattern.png"), url("photo.jpg");
      background-blend-mode: screen, multiply;
    }
  </style>
</head>
<body>
  <div class="blended">Blended background layers</div>
</body>
</html>

En este ejemplo, screen se aplica a la primera capa de imagen de fondo y multiply se aplica a la segunda. Ambas son palabras clave válidas, por lo que no se produce ningún error de validación.