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