CSS3---blending mode

Concept

CSS3 Blending mode (CSS blend Modes) is a new magical feature of CSS3 that allows multiple backgrounds or multiple elements to be blended, similar to Photoshop's layer blending modes

CSS3 Mixed Mode properties at a glance

Background-blend-mode

Background-blend-mode: <blend-mode>

Sets the blending mode between multiple backgrounds, background color, backdrop image, and gradient background.

<blend-mode> can accept 16 values, respectively: normal | Multiply | Screen | Overlay | Darken | Lighten |color-dodge |color-burn | Hard-light | Soft-light | Difference | Exclusion | Hue | Saturation | Color | Luminosity such as

Mix-blend-mode

Mix-blend-mode:<blend-mode>

• Sets the blending mode between multiple elements.
• Between HTML elements, HTML and SVG elements can be

Isolation

Isolation:auto | Isolate

• To set the isolation mode of an element

Download Demo

CSS3---blending mode