What is CSS background-blend-mode property?

CSS Reference Manual
CSS Attributes

The best CSS background-blend-mode property Tutorial In 2024, In this tutorial you can learn Definition and Usage,Browser Support,CSS Syntax,Property Value,related articles,

CSS background-blend-mode property

Previous: CSS3 filter (filter) properties

Next: CSS3 overflow-style property

Examples

Mixed mode:

div {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat: no-repeat;
background-image: linear-gradient ( to right, green 0%, white 100%), url ( 'logo.png');
background-blend-mode: color- dodge;
}

Definition and Usage

background-blend-mode attribute defines the blend mode of the background layer (image color).

Defaults:	normal
Inherited:	no
Animatable:	no. See animatable
version:	CSS3
JavaScript syntax:	object .style.backgroundBlendMode = "screen"

Browser Support

Figures in the table represent the first browser to support the property version number.

Attributes
background-blend-mode	35.0	not support	30.0	7.1	22.0

CSS Syntax

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Property Value

value	description	Examples
normal	Defaults. Setting the normal blend mode.
multiply	Multiply mode.
screen	Color mode.
overlay	Overlay mode.
darken	Dimmer mode.
lighten	Brighten mode.
color-dodge	Color Dodge mode.
saturation	Saturation mode.
color	Color mode.
luminosity	Brightness mode.