CSS mix-blend-mode Property

Difficulty Level : Medium
Last Updated : 28 Dec, 2018

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 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 bootstrap.css and bootstrap-theme.css
13, Mar 20
CSS | table-layout Property
17, Dec 18
CSS | text-align Property
17, Dec 18
CSS | border-top-width Property
03, Jan 19
CSS | isolation Property
16, Jan 19
CSS | border-inline-start-style Property
26, Mar 20
CSS | column-rule-width Property
03, Jan 19
CSS | word-spacing Property
24, Dec 18
CSS | animation-delay Property
18, Dec 18
CSS | margin-top Property
03, Jan 19
CSS | border radius property
13, Jul 18
CSS | grid Property
15, Jan 19
CSS | font-size-adjust Property
16, Jan 19
CSS | visibility Property
23, Oct 18
CSS | Display property
27, Aug 18
CSS | grid-template-columns Property
14, Jan 19
CSS | height Property
11, Jan 19
CSS | transform-origin  Property
24, Jul 19
CSS | animation-name Property
14, Dec 18
CSS | flex-wrap property
17, Aug 18
CSS | align-content property
28, Aug 18
CSS page-break-before Property
03, Jan 19

                              
                          

                                          first_page
                                          Previous
                                      
                                          TreeSet pollFirst() method in Java
                                      

                                          Next
                                          last_page
                                      
                                          Python Program to print digit pattern
                                      
Article Contributed By :

        
    

            sayantanm19
        

            @sayantanm19
        
Vote for difficulty

                                            Current difficulty : 
                                            Medium
                                        

                                            
                                            
                                            
                                            
                                            
                                        
Article Tags : 

                CSS-Properties
            

                Picked
            

                CSS
            

                Web Technologies
            
Report Issue


                
            
        
        
            
			
						

		
		
			
				
					
						What’s New
					
				
				

                            


                                

Data Structures and Algorithms – Self Paced Course
View Details


                            

                            



                                    

Ad-Free Experience – GeeksforGeeks Premium
View Details


                            
                        


			
		
			




		
            
        
            
                
                    Most popular in CSS
                
            
            
                
                    
                        Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Resize image proportionally with CSS
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
                    
                
            
        
    
			

		
                 
        
            
                
                    Most visited in Web Technologies
                
            
            
                
                    
                        JavaScript Number toString() Method
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to calculate the number of days between two dates in javascript?
How to insert spaces/tabs in text using HTML/CSS?
How to set input type date in dd-mm-yyyy format using HTML ?
                    
                
            
        
    
			

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

                    
                        
                    
                    
                
            
        
    

  
	


  
  
      
          
              
                
              
              
                  
                  
                      5th Floor, A-118,

                      Sector-136, Noida, Uttar Pradesh - 201305
                  
              
              
                  
                  feedback@geeksforgeeks.org
              
              
                  
                      
                  
                  
                      
                  
                  
                      
                  
                  
                      
                  
                  
                      
                  
              
          
          
              
                  Company
                  About Us
                  Careers
                  Privacy Policy
                  Contact Us
              
              
                  Learn
                  Algorithms
                  Data Structures
                  Languages
                  CS
                          Subjects
                  Video Tutorials
              
              
                  Practice
                  Courses
                  Company-wise
                  Topic-wise
                  How to begin?
              
              
                  Contribute
                  
                  Write an Article
                  Write Interview
                          Experience
                  Internships
                  Videos
                  
              
          
      
      
          
              @geeksforgeeks
              , Some rights reserved
          
          

          
      
  
  





    
        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

Related Articles