DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

CSS background-blend-mode Property

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;

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

By executing the above code, you will get the output as shown in the below image.

background-blend-mode property

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>

Enter fullscreen mode Exit fullscreen mode

Result:

After executing the above code, we will get the result as shown in the below image.

Background-blend-mode with screen value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

By running the above code, you will get the result as shown in the below image.

Background-blend-mode with color-dodge

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>

Enter fullscreen mode Exit fullscreen mode

Result:

After running the above code, you can get the output as shown in the below image.

Background-blend-mode with multiply

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>

Enter fullscreen mode Exit fullscreen mode

Result:

By running the above code, you will get the output as given in the below screenshot.

Background-blend-mode property with overlay

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>

Enter fullscreen mode Exit fullscreen mode

Result:

By running the above code, you can get the result as shown in the below image.

Background-blend-mode with the darken value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

By running the above code, you will get the result as shown in the below image.

Background-blend-mode property with saturation value

Browser-Support:

Browser-support

Read More:

The post CSS background-blend-mode Property appeared first on Share Point Anchor.

Top comments (0)