Skip to content
Related Articles

Related Articles

CSS mix-blend-mode Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 07 Jun, 2022
View Discussion
Improve Article
Save Article

The CSS mix-blend-mode property of an element is used to specify the blending of an element’s background with the element’s parent. 

Syntax:

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

Values:

  • initial – the default setting, this does not set a blend mode.
  • inherit – this inherits the blend mode of its parent element.
  • unset – this removes the current blend mode from the element.
  • normal – no blending is applied on the element. 

html




<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>normal</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: normal">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>

  • Output:
 mix-blend-mode: normal
  • multiply – this multiplies the element’s color with the background. The resulting color is always as dark as the background. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>multiply</h1>
         
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: multiply">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output:
 mix-blend-mode: multiply
  • screen – this multiplies the element’s color with the background and then complements the result. The resulting color is always as bright as one of the blended layers. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>screen</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: screen">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: 
mix-blend-mode: screen
  • exclusion – this subtracts the darker of two colors from the lightest color of the element. The result is similar to ‘difference’ but with a lower contrast. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>exclusion</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: exclusion">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: mix-blend-mode: exclusion
  • overlay – this applies ‘multiply’ on lighter colors and ‘screen’ on darker colors in the element. The effect is effectively the opposite of ‘hard-light’. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>overlay</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: overlay">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: mix-blend-mode: overlay
  • lighten – this replaces the background with the element’s color where the element is lighter. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>lighten</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: lighten">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: mix-blend-mode: lighten
  • darken – this replaces the background with the element’s color where the element is darker. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>darken</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: darken">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: mix-blend-mode: darken
  • color-dodge – this lightens the background color to reflect the color of the element. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>color-dodge</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: color-dodge">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
        </div>
    </div>
</body>
</html>
  • Output: mix-blend-mode: color-dodge
  • color-burn – this darkens the background color to reflect the natural colors of the image. The result has increased amount of contrast between the element and the background. 
html



<!DOCTYPE html>
<html>
<body>
    <h1 style='color: green'>GeeksForGeeks</h1>
    <div style="background-color: orange; width: 225px; padding: 10px;">
        <h3>mix-blend-mode set to: </h3>
        <h1>color-burn</h1>
 
        <!-- mix-blend-mode Property -->
        <div style="mix-blend-mode: color-burn">
            <img src="https:/<li><b>Normal:</b>
 
<strong>Syntax:</strong>
<pre>mix-blend-mode: normal</pre>
<ul > <li > Chrome 41.0 </li > <li > Edge 79.0 </li > <li > Firefox 32.0 </li > <li > Opera 28.0 </li > <li > Safari 8.0 </li > <li > Internet Explorer not supported </li > </ul >

My Personal Notes
arrow_drop_up
Previous
CSS | border-bottom-width Property
Next

CSS | text-decoration-color Property
Recommended Articles
Page :
CSS | transition-property Property
31, Dec 18
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
CSS | border-inline-start-style Property
26, Mar 20
How unicode-bidi property is used in CSS ?
21, Apr 21
CSS | transform-origin Property
24, Jul 19
How to use text overflow property in CSS ?
21, Apr 21
How to disable resizable property of textarea using CSS?
13, Nov 18
How content property is used with :after selector in CSS ?
15, Apr 21
CSS | hanging-punctuation Property
21, Jan 19
CSS font-family Property
24, Dec 18
CSS clip Property
27, Dec 18
CSS font-style Property
27, Dec 18
CSS text-decoration Property
28, Dec 18
CSS object-fit Property
31, Dec 18
CSS | line-height Property
31, Dec 18
CSS list-style Property
31, Dec 18
CSS border-style Property
31, Dec 18
CSS border-color Property
02, Jan 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty
Current difficulty :
Medium





Improved By :
Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!