How to create the background blend mode in CSS styling?

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("");
  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


This is the default value. It sets the blending mode to normal. 


The background image and color gets inverted, multiplies, and then inverts again.


Makes an image darker by a blending dark and light colour


The darken mode will replace the background image
if it is darker than the background color of the div.


The lighten mode will replace the background image
if it is lighter than the background color of the div.


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. 


Preserves the luminosity of the top color by using hue and saturation from the background-color. 


A mixture of the colors of background color and background image for the image backdrop.