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 >
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Jun, 2022
Like Article
Save Article