
The CSS background-blend-mode property specifies the blending mode of each background layer (colour and/or image).
Syntax:
background-blend-mode: multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity|normal;
normal (default) – sets the blending mode to normal.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#normal {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: normal;
}
</style>
</head>
<body>
<div id="normal"></div>
</body>
</html>
Output:
multiply – sets the blending mode to multiply.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#multiply {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div id="multiply"></div>
</body>
</html>
Output:
screen – sets the blending mode to screen.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#screen {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: screen;
}
</style>
</head>
<body>
<div id="screen"></div>
</body>
</html>
Output:
overlay – sets the blending mode to overlay.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: overlay;
}
</style>
</head>
<body>
<div id="overlay"></div>
</body>
</html>
Output:
darken – sets the blending mode to darken.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#darken {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: darken;
}
</style>
</head>
<body>
<div id="darken"></div>
</body>
</html>
Output:
lighten – sets the blending mode to lighten.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#lighten {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: lighten;
}
</style>
</head>
<body>
<div id="lighten"></div>
</body>
</html>
Output:
color-dodge – sets the blending mode to color-dodge.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#color-dodge {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div id="color-dodge"></div>
</body>
</html>
Output:
saturation – sets the blending mode to saturation.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#saturation {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: saturation;
}
</style>
</head>
<body>
<div id="saturation"></div>
</body>
</html>
Output:
color – settles the blending mode to colour.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#color {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: color;
}
</style>
</head>
<body>
<div id="color"></div>
</body>
</html>
Output:
luminosity – sets the blending mode to luminosity.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#luminosity {
width: 320px;
height: 240px;
background-repeat: no-repeat, repeat;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
background-blend-mode: luminosity;
}
</style>
</head>
<body>
<div id="luminosity"></div>
</body>
</html>
Output:
Enjoy coding!
Read also: