CSS mix-blend-mode Property

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.

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

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

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

<!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’.

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

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

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

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

<!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> 
  
Output:


hard-light – this applies ‘multiply’ on lighter colors and ‘screen’ on darker colors of the element. This effect is effectively the opposite of ‘overlay’.



<!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>hard-light</h1> 
        <div style="mix-blend-mode: hard-light"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> 
        </div> 
    </div> 
</body> 
</html> 



chevron_right
filter_none
Output:

soft-light – this applies ‘multiply’ on lighter colors and ‘screen’ on darker colors in the element. The resulting effect is softer than that of ‘overlay’.



<!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>soft-light</h1> 
        <div style="mix-blend-mode: soft-light"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> 
        </div> 
    </div> 
</body> 
</html> 



chevron_right
filter_none
Output:

difference – this subtracts the absolute difference of the background color and the element’s color.



<!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>difference</h1> 
        <div style="mix-blend-mode: difference"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> 
        </div> 
    </div> 
</body> 
</html> 



chevron_right
filter_none
Output:
hue – this applies the hue of the element with the saturation and luminosity of the background.



<!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>hue</h1> 
        <div style="mix-blend-mode: hue"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> 
        </div> 
    </div> 
</body> 
</html> 



chevron_right
filter_none
Output:

saturation – this applies the saturation of the element with the hue and luminosity of the background.



<!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>saturation</h1> 
        <div style="mix-blend-mode: saturation"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> 
        </div> 
    </div> 
</body> 
</html> 



chevron_right
filter_none
Output:
color – this applies the hue and saturation of the element with the luminosity of the background.



<!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</h1> 
        <div style="mix-blend-mode: color"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> 
        </div> 
    </div> 
</body> 
</html> 



chevron_right
filter_none
Output:

luminosity – this applies the luminosity of the element with the hue and saturation of the background.



<!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>luminosity</h1> 
        <div style="mix-blend-mode: luminosity"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> 
        </div> 
    </div> 
</body> 
</html> 



chevron_right
filter_none
Output:

Browsers that support mix-blend-mode are:
Chrome 41.0
Firefox 32.0
Opera 35.0
Safari 8.0




        My Personal Notes
        arrow_drop_up
    

            
            
        
Recommended Posts:CSS | transition-property Property
CSS | right Property
CSS | nav-up property
CSS | nav-right property
CSS | nav-down property
CSS | top Property
CSS | all Property
Web API | DOMRectReadOnly y property
HTML | DOM value Property
CSS | margin-right Property
HTML | DOM name Property
CSS | max-height Property
Web API | DOMRect top property
Web API | DOMRect right property
CSS | grid-row-gap Property
CSS | min-height Property
Web API | DOMRectReadOnly x property
HTML | DOM specified Property
CSS | height Property
HTML | DOM Bdo dir Property
sayantanm19
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.

Article Tags : CSS
Web Technologies
CSS-Properties


         thumb_up
 
                2



        
        To-do
        
        Done
        
2.5

Based on 2 vote(s)
            
            
            
            
            
        
Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.
Post navigation
Previous
first_page CSS | text-decoration-color PropertyNext
last_pageHTML | autofocus Attribute 




Writing code in comment? Please use ide.geeksforgeeks.org, generate link and share the link here.




	




			
						

		
            
            
            
            
			

		
                    
                    
                     
                    Most popular in CSS
                     
                    
                        Top 10 Projects For Beginners To Practice HTML and CSS Skills
10 CSS Selectors Every Developer Should Know
How To Become A Web Developer in 2020 - A Complete Guide
Create a Music Player using JavaScript
How to set up fixed width for

Most visited in Web Technologies

✍
Write a Testimonial