CSS background-blend-mode Property
Tags: learncss, cssb
Published: 2021-05-10 05:20:58

---
title: CSS background-blend-mode Property
published: true
date: 2021-02-19 11:33:58 UTC
tags: LearnCSS,CSSB
canonical_url: https://sharepointanchor.com/learn-css/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;

```

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_YwKR7c5pg4.png)<figcaption>background-blend-mode property</figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_bHJpk56Sfb.png)<figcaption>Background-blend-mode with screen value</figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_fhGViLeEOF.png)<figcaption>Background-blend-mode with color-dodge</figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_4us6dAXyv2.png)<figcaption>Background-blend-mode with multiply</figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_vy2IbLdoYW.png)<figcaption>Background-blend-mode property with overlay </figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_LzuwJZA6q1.png)<figcaption>Background-blend-mode with the darken value </figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_CQa8r9aOEd.png)<figcaption>Background-blend-mode property with saturation value</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_07JEY4poTR.png)<figcaption>Browser-support</figcaption>

**Read More:**

- [CSS background Property](https://sharepointanchor.com/learn-css/css-background-property/)
- [CSS all Property](https://sharepointanchor.com/learn-css/css-all-property/)
- [CSS animation Property](https://sharepointanchor.com/learn-css/css-animation-property/)
- [HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)
- [CSS background-attachment Property](https://sharepointanchor.com/learn-css/css-background-attachment-property/)

The post [CSS background-blend-mode Property](https://sharepointanchor.com/learn-css/css-background-blend-mode-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).