The background-blend-mode
CSS property describes how the element's background images should blend with each other and the element's background color.
/* One value */ background-blend-mode: normal; /* Two values, one per background */ background-blend-mode: darken, luminosity; /* Global values */ background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: unset;
Blending modes should be defined in the same order as the background-image
CSS property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
Initial value | normal |
---|---|
Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Media | none |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<blend-mode>
- Is a
<blend-mode>
denoting the blending mode to be applied. There can be several values, separated by commas.
Formal syntax
<blend-mode>#where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Examples
Specifications
Specification | Status | Comment |
---|---|---|
Compositing and Blending Level 1 The definition of 'background-blend-mode' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 35 | ? | 30 | No | 22 | Yes |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | No | ? | ? | 30 | No | 22 | 8 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
colleenmcginnis,
mrstork,
Sebastianz,
teoli,
jsx,
amitabha197,
realityking,
TWebs,
mii8303,
cabanier,
FredB
Last updated by:
fscholz,