The CSS background-blend-mode property defines the blending mode of each background layer. You can blend the background image with another image or with the background color. This is of the CSS3 properties.
This property is used for blending elements. It has a total of 10 values. The default value is normal. If there are several background layers, and they have a specified list of blend-modes, this property can be applied in the same order as background-image.
- The background-blend-mode property allows the following values:
- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- saturation
- color
- luminosity
Characteristics of Background-blend-mode property:
| Initial Value | normal |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No |
| Animatable | No |
| Version | CSS3 |
| JavaScript Syntax | object.style.backgroundBlendMode = "luminosity"; |
Syntax:
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
Values:
| Value | Description |
|---|---|
| normal | This property set the blending mode to normal. |
| multiply | Sets the blending mode to multiply. |
| screen | It will set the blending mode to screen. |
| overlay | This can set the blending mode to overlay. |
| darken | Sets the blending mode to darken. |
| lighten | This property sets the blending mode to lighten. |
| color-dodge | It will set the blending mode to color-dodge. |
| saturation | Sets the blending mode to saturation. |
| color | It can set the blending mode to color. |
| luminosity | Sets the blending mode to luminosity. |
Example of Background-blend-mode Property:
This example code uses the background-blend-mode property.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-blend-mode: normal;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result:
By executing the above code, you will get the output as shown in the below image.
Example of the background-blend-mode property with “screen” value:
In the following example, you will see how the background images are blended. Apply the code and execute it.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-blend-mode: screen;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result:
After executing the above code, we will get the result as shown in the below image.
Example of Background-blend-mode property with “color-dodge” value:
Here, we come up with the another code using background-blend-mode property with color-dodge value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-blend-mode: color-dodge;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result:
By running the above code, you will get the result as shown in the below image.
Example of Background-blend-mode with “multiply” value:
The following code uses the background-blend-mode with multiply value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-blend-mode: multiply;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result:
After running the above code, you can get the output as shown in the below image.
Example of Background-blend-mode property with “overlay” value:
In the following code, we have used the background-blend-mode property with the overlay value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-blend-mode: overlay;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result:
By running the above code, you will get the output as given in the below screenshot.
Example of Background-blend-mode property with the “darken” value:
This example code used the background-blend-mode property with the darken value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-blend-mode: darken;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result:
By running the above code, you can get the result as shown in the below image.
Example of Background-blend-mode property with the “saturation” value:
In the following code, you can see that the background-blend-mode property with the saturation value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://sharepointanchor.com/wp-content/uploads/2021/01/Share-Point-Anchor.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-blend-mode: saturation;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result:
By running the above code, you will get the result as shown in the below image.
Browser-Support:
Read More:
- CSS background Property
- CSS all Property
- CSS animation Property
- HTML
Code Tag - CSS background-attachment Property
The post CSS background-blend-mode Property appeared first on Share Point Anchor.
Top comments (0)