Background-blend-mode - CSS Property

Syntax diagram of background-blend-mode.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• We list as many blending modes as there are background images, separated by commas.

Description of the background-blend-mode property.

The property background-blend-mode defines how background images and the background color are blended. By default, the images underneath, as well as the color, are only visible through the transparent parts of the top images. But background-blend-mode changes this behavior. It's similar to the way layer blending works in Photoshop.

Reminder of the syntax for setting a background made up of multiple images (here two) and a color:

background-image: url('image1'), url('image2'), silver; └───────────┘ └───────────┘ └─────┘ image above image below color

The background-blend-mode property has no effect if the background is made up of just a single image or only a color.

Additional information can be found by following the links below:

• General overview of backgrounds in CSS.
• Multiple backgrounds.
• Tutorial on Blend modes.
• The property mix-blend-mode to blend the foreground and the background.

Values for background-blend-mode.

• background-blend-mode: normal;

  Default value. The image on top hides the other images and the background color, except in its transparent parts.
• background-blend-mode: lighten; background-blend-mode: darken; background-blend-mode: multiply; background-blend-mode: screen; background-blend-mode: overlay; background-blend-mode: color-burn; background-blend-mode: color-dodge; background-blend-mode: hard-light; background-blend-mode: soft-light; background-blend-mode: difference; background-blend-mode: exclusion; background-blend-mode: hue; background-blend-mode: color; background-blend-mode: luminosity; background-blend-mode: saturation;

  The different backgrounds are mixed, and the background color too. That is, they are combined depending on the blending mode chosen.

  Check out the page on Blend modes for detailed explanations about the different blending modes.

• background-blend-mode: multiply, screen, luminosity, ...;

  This syntax, containing several values separated by commas, can be used when multiple backgrounds have been defined. See Multiple backgrounds.

• background-blend-mode: initial; (normal) background-blend-mode: inherit; background-blend-mode: revert; background-blend-mode: revert-layer; background-blend-mode: revert-rule; background-blend-mode: unset;

  Links to the presentation of these different values: initial, inherit, revert, revert-layer, revert-rule, unset.

Access the background-blend-mode property via a program

With Javascript, change the value of background-blend-mode.

Two code examples are given to change the value of background-blend-mode for the el element. JavaScript actually allows a syntax with the typical CSS notation, in kebab-case (a dash to separate words), and another syntax with camel-case notation (a capital letter to separate words).

let el = document.getElementById('id'); el.style['background-blend-mode'] = 'darken'; // or let el = document.getElementById('id'); el.style.backgroundBlendMode = 'darken';

With Javascript, read the value of background-blend-mode.

The property must have been set directly in the HTML code, using the element's style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['background-blend-mode']; // or let el = document.getElementById('id'); let value = el.style.backgroundBlendMode;

With Javascript, read the computed value of background-blend-mode.

The computed value is always defined: it either comes from directly assigning a value to the element, via a CSS selector or the style attribute, or from a value inherited through the usual mechanism, or it will just be the property's initial value.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('background-blend-mode');

With JQuery, read or change the value of background-blend-mode.

Like in JavaScript, two syntax variants are accepted.


// Read the value:
$('#id').prop('background-blend-mode');
// Write the value:
$('#id').prop('background-blend-mode', 'darken');
$('#id').prop('{background-blend-mode': 'darken'});


With JQuery, read the computed value of background-blend-mode.

let value = $('#id').css('background-blend-mode');

Take the test yourself.

The buttons below apply the entered value to the background-blend-mode property and then show either the value as it was applied, or the computed value. This second option lets you see how the value of background-blend-mode is stored (serialized). In the case of background-blend-mode, there won’t be any differences between the two values unless you enter an incorrect value.

Simulator.

The example on the left has a background made up of the two images below (the flower and the checkerboard), with the flower positioned on top of the checkerboard. Watch how background-blend-mode makes these two backgrounds interact.

The background of the example on the right has a color gradient from white to black, and an image (the checkerboard). The gradient is positioned on top of the image.

Flower

Checkerboard

Dégradé

Browsers compatibility with background-blend-mode.

The property background-blend-mode is well recognized by all current browsers.

1

Blend
modes

2

background-blend-mode
property

Estimated overall support.

96%

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Chrome

Edge

Firefox

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the background-blend-mode property.

The property background-blend-mode is not defined in the same module as the other background-related properties. A separate module was created specifically for image blends.

• Compositing and Blending Level 1

  This module defines how the images of overlapping elements are composed. In this module, you will find:
  - composition operators,
  - advanced blending modes,
  - composition groups,
  - properties for isolation.

  Regarding background-blend-mode First definition of the background-blend-mode property.
  

  August 16, 2012

  Working Draft.

  

  February 20, 2014

  Candidate Recommendation.

  

  

See also, regarding layer mixes.

The W3C specification "Compositing and Blending" covers everything about mixing two layers (two images, the content and the background, etc.)

Properties:

Background-blend-mode

Defines the mixing of colors between background image(s) and background color.

isolation

Allows or does not allow interactions between layers.

mix-blend-mode

Sets how the content blends with what's visible in the background of the clip.