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

Definition and Usage

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

Default value:	normal
Inherited:	no
---	---
Animatable:	no. See animatable
---	---
Version:	CSS3
---	---
JavaScript syntax:	object.style.backgroundBlendMode="screen"
---	---

Browser Support

The numbers in the table specify the first browser version that fully 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 Values

Value	Description	Example
normal	Default value. Sets normal blending mode.	Try it »
multiply	Multiply blending mode.	Try it »
screen	Screen blending mode.	Try it »
overlay	Overlay blending mode.	Try it »
darken	Darken blending mode.	Try it »
lighten	Lighten blending mode.	Try it »
color-dodge	Color dodge blending mode.	Try it »
saturation	Saturation blending mode.	Try it »
color	Color blending mode.	Try it »
luminosity	Luminosity blending mode.	Try it »

CSS Tutorial: CSS Background