background blend mode

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS background Blend Mode Property

Example

Specify a blending mode:

div { 
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat:no-repeat;
    background-image: linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
    background-blend-mode: color-dodge;

}

Definition and Usage

The background-blend-mode property defines the blending mode of each background layer (color and/or image).

CSS Syntax

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

Property Values

Value Description
normal                                   This is default. Sets the blending mode to normal
multiply                           Sets the blending mode to multiply
screen                                Sets the blending mode to screen
overlay                            Sets the blending mode to overlay
overlay                             Sets the blending mode to overlay
lighten                               Sets the blending mode to lighten
color-dodge                Sets the blending mode to color-dodge
saturation                     Sets the blending mode to saturation
color                                    Sets the blending mode to color
luminosity                      Sets the blending mode to luminosity