Get the best out of our app
CSS mix-blend-mode Property Improve Article
Save Article
Like Article
Improve Article
Save Article
Like 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>
<div style="mix-blend-mode: normal">
</div>
</div>
</body>
</html>
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>
<div style="mix-blend-mode: multiply">
</div>
</div>
</body>
</html>
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>
<div style="mix-blend-mode: screen">
</div>
</div>
</body>
</html>
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>
<div style="mix-blend-mode: exclusion">
</div>
</div>
</body>
</html>
Output: 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>
<div style="mix-blend-mode: overlay">
</div>
</div>
</body>
</html>
Output: 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>
<div style="mix-blend-mode: lighten">
</div>
</div>
</body>
</html>
Output: 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>
<div style="mix-blend-mode: darken">
</div>
</div>
</body>
</html>
Output: 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>
<div style="mix-blend-mode: color-dodge">
</div>
</div>
</body>
</html>
Output: 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>
<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 >
Last Updated :
07 Jun, 2022
Like Article
Save Article
Vote for difficulty
Easy
Normal
Medium
Hard
Expert
![https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"](https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"){kind=link}
Please Login to comment...