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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- 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"
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Browsers that support mix-blend-mode are:
- Chrome 41.0
- Firefox 32.0
- Opera 35.0
- Safari 8.0
- hard-light – this applies ‘multiply’ on lighter colors and ‘screen’ on darker colors of the element. This effect is effectively the opposite of ‘overlay’.