CSS - mix-blend-mode Property

Previous
Quiz
Next

CSS mix-blend-mode property determines how the content of an element should blend with the content of its parent and the element's background.

Syntax

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

Property Values

Value Description
normal No blending occurs.
multiply It darkens colors by multiplying the background and foreground colors.
screen It lightens colors by inverting, multiplying, and inverting again.
overlay It combines multiply and screen, preserving highlights and shadows.
darken It retains the darker color from overlapping elements.
lighten It retains the lighter color from overlapping elements.
color-dodge It brightens the background by decreasing the color of the element.
color-burn It darkens the background by increasing the color of the element.
difference It subtracts the colors to create a high-contrast effect.
exclusion It is similar to difference, but with softer contrast effects.
hue It preserves luminance and saturation, altering only the hue.
saturation It Preserves luminance and hue, altering only the saturation.
color It combines hue and saturation of the element with luminance.
luminosity It preserves hue and saturation, altering only the luminosity.

Examples of CSS Mix Blend Mode Property

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

Mix Blend Mode Property with Normal Value

To prevent an element from interacting with other layers, we use the normal value. The element is rendered as is without any interaction with underlying layers. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: normal;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: normal
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Multiply Value

To multiply the background and foreground colors, resulting in a darker color, we use the multiply value. It results in rich shadows. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: multiply;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: multiply
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Screen Value

To brighten the colors by inverting both layers, multiplying them, and then inverting the result, we use the screen value. It produces a brightening effect. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: screen;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: screen
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Overlay Value

To enhances contrast by darkening dark areas and lightening light areas, we use the overlay value. It combines multiply and screen preserving highlights and shadows. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: overlay;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: overlay
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Darken Value

To compare the background and foreground colors, retaining the darker color, we use the darken value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: darken;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: darken
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Lighten Value

To retain the lighter color from overlapping elements, we use the lighten value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: lighten;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: lighten
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Color Dodge Value

To brighten the background by decreasing the foreground colors intensity, we use the color-dodge value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: color-dodge;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: color-dodge
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Color Burn Value

To darken the background by increasing the foreground colors intensity, we use the color-burn value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: color-burn;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: color-burn
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Difference Value

To subtract the colors of the overlapping layers, resulting in high-contrast effect, we use the difference value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: difference;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: difference
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Exclusion Value

To subtract the colors of the overlapping layers, resulting in a soft contrast effect, we use the exclusion value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: exclusion;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: exclusion
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Hue Value

To preserve the luminance and saturation of the background while altering only the hue of the element, we use the hue value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: hue;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: hue
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Saturation Value

To preserve luminance and hue, modifying only the saturation of the element, we use the saturation value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: saturation;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: saturation
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Color Value

To combine the hue and saturation of the element with the luminance of the background, we use the color value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: color;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: color
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Mix Blend Mode Property with Luminosity Value

To preserve the hue and saturation of the element, altering only the luminance, we use the luminosity value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: luminosity;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: luminosity
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
mix-blend-mode 41.0 79.0 32.0 8.0 35.0
css_reference.htm
Print Page
Previous
Next
Advertisements