How to create the background blend mode in CSS styling?

by

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.

saturation

Mixes the hue and luminosity of the background color. 

difference

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.