About This HTML Issue
The background-blend-mode property controls how an element’s background layers — including background images and background colors — blend with each other. Each value must be a valid blend mode keyword as defined in the CSS Compositing and Blending specification. The W3C validator flags this error when it encounters a value that doesn’t match any recognized keyword, which can happen due to typos, made-up values, or confusion with similar properties like mix-blend-mode.
While browsers typically ignore unrecognized CSS values and fall back to the default (normal), relying on this behavior is risky. It means the blending effect you intended simply won’t appear, and the silent failure can be hard to debug. Fixing validation errors ensures your styles work as intended across all browsers.
The complete list of valid values for background-blend-mode is:
-
normal(default) -
multiply -
screen -
overlay -
darken -
lighten -
color-dodge -
color-burn -
hard-light -
soft-light -
difference -
exclusion -
hue -
saturation -
color -
luminosity
You can also specify multiple comma-separated values when an element has multiple background layers. Each value corresponds to a background layer in the same order.
Examples
Invalid values
These examples will trigger the validation error:
/* Typo: "multipley" is not a valid keyword */
.hero {
background-blend-mode: multipley;
}
/* "blend" is not a recognized value */
.banner {
background-blend-mode: blend;
}
/* Numeric values are not accepted */
.card {
background-blend-mode: 50%;
}Corrected values
/* Fixed: correct spelling */
.hero {
background-blend-mode: multiply;
}
/* Fixed: use a valid blend mode keyword */
.banner {
background-blend-mode: overlay;
}
/* Fixed: use a keyword instead of a numeric value */
.card {
background-blend-mode: soft-light;
}Multiple background layers
When you have multiple background images, provide a comma-separated list of valid blend modes:
<!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>
In this example, screen applies to the first background image layer and multiply applies to the second. Both are valid keywords, so no validation error is produced.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.