The background-blend-mode Property defines how the element’s background image should blend with each other and with the element’s background-color.
Syntax:
background-blend-mode: normal|multiply|screen|darken|lighten| color-dodge|saturation|difference|luminosity|overlay;
Property:
Normal: This is default value. It sets the blending mode to normal.
- Syntax:
background-blend-mode: normal;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: normal;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Multiply:It sets the blending mode to multiply. This leads to a darker image than before.
- Syntax:
background-blend-mode: multiply;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: multiply;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Screen:It sets the blending mode to screen. In this mode both image and color is inverted, multiplied and then inverted. again.
- Syntax:
background-blend-mode: screen;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: screen;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Darken:It sets the blending mode to darken. In this mode if the background-image is darker than the background-color then the image is replaced, otherwise, it is left as it was.
- Syntax:
background-blend-mode: darken;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: darken;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Lighten:It sets the blending mode to lighten. In this mode if the background-image is lighter than the background-color then the image is replaced, otherwise it is left as it was.
- Syntax:
background-blend-mode: lighten;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: lighten;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Color-Dodge:It sets the blending mode to color-dodge. In this mode, the background-color is divided by the inverse of the background-image. This is very similar to the screen blend mode.
- Syntax:
background-blend-mode: color-dodge;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: color-dodge;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Saturation:It sets the blending mode to lighten. This mode keeps the saturation of the background-image whilst mixing the hue and luminosity of the background color.
- Syntax:
background-blend-mode: saturation;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: saturation;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Difference:It sets the blending mode to difference. This mode is the result by subtracting the darker color of the background-image and the background-color from the lightest one. Often the image will have very high contrast.
- Syntax:
background-blend-mode: difference;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: difference;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Luminosity:It sets the blending mode to luminosity. In this mode, the luminosity of the top color is preserved whilst using the saturation and hue of the background-color.
- Syntax:
background-blend-mode: luminosity;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: luminosity;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Overlay:It sets the blending mode to overlay. In this mode the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.
- Syntax:
background-blend-mode: Overlay;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-blend-mode Property</
title
>
<
style
>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
background-blend-mode: overlay;
background-size: contain;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"myDIV"
></
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Supported Browsers: The browser supported by backgroud-blend-mode property are listed below:
- Google Chrome 35.0
- Firefox 30.0
- Opera 22.0
- Apple Safari 7.1