CSS - background-blend-mode Property

Quiz

CSS background-blend-mode property is used in determining how an element's background images blend with each other or with the background color.

Syntax

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

Property Values

Value	Description
normal	No blending occurs; the background layers are displayed as specified in the CSS without any interaction between them. Default.
multiply	The colors of the background layers are multiplied together, resulting in a darker image where overlapping colors become more intense.
screen	The colors of the background layers are inverted, multiplied, and then inverted again, leading to a lighter image with increased brightness.
overlay	Combines multiply and screen modes based on the background colors, darkening the image in darker areas and lightening it in lighter areas.
darken	Keeps the darkest color from the overlapping background layers, resulting in a darker overall image where colors are blended to retain the lower brightness.
lighten	Keeps the lightest color from the overlapping background layers, resulting in a lighter image where colors blend to preserve higher brightness.
color-dodge	Brightens the colors of the background layers to reflect the blend color, often producing a high-contrast and vivid effect.
saturation	Blends the background layers by adjusting their saturation while preserving the hue and lightness, affecting the intensity of the colors.
color	Blends the background layers by preserving the hue and saturation while combining their lightness, resulting in a colored image with the blend color's characteristics.
luminosity	Blends the background layers by preserving the lightness and darkness while combining their hue and saturation, affecting the overall brightness without altering color characteristics.

Examples of CSS Background Blend Mode Property

The following examples explain the background-blend-mode property with different values.

Background Blend Mode Property with Normal Value

To display an image such that the background layers are displayed without any interaction between them, we use the normal value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: normal
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Multiply Value

To display an image such that the colors of the background layers are multiplied together, resulting in a darker image where overlapping colors become more intense, we use the multiply value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: multiply;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: multiply
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Screen Value

To display an image such that the colors of the background layers are inverted, multiplied, and then inverted again, leading to a lighter image with increased brightness, we use the screen vaalue. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: screen;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: screen
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Overlay Value

To display an image such that the image is darkened in the darker areas and lightened in the lighter areas, we use the overlay value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: overlay;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: overlay
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Darken Value

To display an image such that the darkest color from the overlapping background layers, resulting in a darker overall image where colors are blended to retain the lower brightness, we use the darken value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: darken;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: darken
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Lighten Value

To display an image such that the lightest color is kept from the overlapping background layers, resulting in a lighter image where colors blend to preserve higher brightness, we use the lighten value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: lighten;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: lighten
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Color Dodge Value

To display an image where the bright color of the background layers reflecting the blend color are brightned resulting in a high-contrast and vivid effect, we use the color-dodge value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: color-dodge;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: color-dodge
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Saturation Value

To display an image where the background layers are blended by adjusting their saturation while preserving the hue and lightness, affecting the intensity of the colors, we use the saturation value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: saturation;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: saturation
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Color Value

To display an image such that the background layers are blended by preserving the hue and saturation while combining their lightness, resulting in a colored image with the blend color's characteristics, we use the color value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: color;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: color
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Background Blend Mode Property with Luminosity Value

To display an image such that the background layers are blended by preserving the lightness and darkness while combining their hue and saturation, affecting the overall brightness without altering color characteristics, we use the luminosity value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: luminosity;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: luminosity
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

Supported Browsers

Property
background-blend-mode	35.0	79.0	30.0	7.1	22.0

css_reference.htm

Print Page