HTML Guide for background-blend-mode

CSS: “background-blend-mode”: X is not a “background-blend-mode” value.

background-blend-mode only accepts certain keywords as values, such as normal, multiply, screen, and others.

The background-blend-mode property in CSS specifies how background images and background colors blend together. Its value must be one or more blend mode keywords defined by CSS, for example, normal, multiply, screen, overlay, etc. Using an unrecognized value will generate a validation error.

Valid values include:

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

Example of an invalid value:

/* Invalid: 'X' is not a recognized value */
background-blend-mode: X;

Example of a valid value:

/* Valid: 'multiply' is a recognized blend mode */
background-blend-mode: multiply;

Example HTML with correct CSS property:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Blend Mode Example</title>
  <style>
    .blended-bg {
      background-image: url('image1.jpg'), url('image2.jpg');
      background-blend-mode: overlay;
    }
  </style>
</head>
<body>
  <div class="blended-bg" style="width:200px; height:200px;">
    Blended background
  </div>
</body>
</html>

Replace any invalid values for background-blend-mode in your CSS with one of the supported keywords.