CSS background-blend-mode Property

Example

Blend 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;
}

Try it Yourself »

Definition and Usage

The background-blend-mode property defines the blending mode of background layers (images and colors).

Default Value:	normal
Inherited:	no
Animatable:	no. Viewanimatable
version:	CSS3
JavaScript Syntax:	object.style.backgroundBlendMode="screen"

Browser Support

Numbers in the table indicate the first browser version that supports the property.

Property
background-blend-mode	35.0	Not supported	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	Example
normal	Default value. Sets the normal blend mode.	Try it Yourself »
multiply	Multiply mode.	Try it Yourself »
screen	Screen mode.	Try it Yourself »
overlay	Overlay mode.	Try it Yourself »
darken	Darken mode.	Try it Yourself »
lighten	Lighten mode.	Try it Yourself »
color-dodge	Color Dodge mode.	Try it Yourself »
saturation	Saturation mode.	Try it Yourself »
color	Color mode.	Try it Yourself »
luminosity	Luminosity mode.	Try it Yourself »

CSS Tutorial:CSS Backgrounds

other extensions