The background blend mode property in CSS defines the blend mode of an element’s background image or colour. It sets the amount to which a background image blends with the colour set for that element. Let’s check the different options we can use for this property.
background blend mode syntax
Let’s create a div with a background-color and background-image in this section. Consider the code snippet below for this.
.image {
margin: 4%;
width: 45%;
display: flex;
background-color: #1e5792;
background-repeat: no-repeat;
background-image: url("http://scratchcoding.dev/wp-content/uploads/2022/09/scratch-coding-logo.jpg");
background-size: contain;
}
Next, we will apply different values for the ‘background-blend-mode’ property for this div. You can simply add any value as shown below or pass any other value as specified in the next section.
background-blend-mode: screen;
background blend mode values
normal
This is the default value. It sets the blending mode to normal.
screen
The background image and color gets inverted, multiplies, and then inverts again.
multiply
Makes an image darker by a blending dark and light colour
darken
The darken mode will replace the background image
if it is darker than the background color of the div.
lighten
The lighten mode will replace the background image
if it is lighter than the background color of the div.
color-dodge
In color-dodge, the background-color gets divided by the inverse of the background-image of the div.
Mixes the hue and luminosity of the background color.
The difference of the darker color of the background image, and the lightest color of the background-color.
luminosity
Preserves the luminosity of the top color by using hue and saturation from the background-color.
Overlay
A mixture of the colors of background color and background image for the image backdrop.