This article is in need of an editorial review.


The background-blend-mode CSS property describes how a background should blend with the element's background that is below it and the element's background color. Background elements should be blended while content appearance should be kept unchanged.

Blending modes should be defined in the same order as the background-image CSS property. If 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
  • Inherited no
  • Media visual
  • Computed value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax:  <blend-mode>#
property: normal               /* One value */
property: darken, luminosity   /* Two values */


Is a <blend-mode> denoting the blending mode to be applied. There can be several values, separated by commas.



Specification Status Comment
Unknown Unknown Initial specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? 28.0 (28.0) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

Document Tags and Contributors

Contributors to this page: FredB
Last updated by: FredB,
Hide Sidebar