CSS Features

Editor's Draft · compositing

Compositing and Blending

3 properties, 1 type defined by this specification, all known to at least one browser .

Read the Editor's Draft ↗

Each feature in detail

background-blend-mode

Property Baseline: widely availablesince July 2022

MDN The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

Live preview Example from MDN 
#example-element {
  background-color: green;
  background-image: url("https://developer.mozilla.org/shared-assets/images/examples/balloon.jpg");
  width: 250px;
  height: 305px;
}

Syntax

<'mix-blend-mode'>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
normal
Applies to
All HTML elements
Inherited
no
Percentages
N/A
Computed value
as specified
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 35
Edge 79
Firefox 30
Safari 8
Chrome Android 35
Safari iOS 8

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

isolation

Property Baseline: widely availablesince July 2022

MDN The isolation CSS property determines whether an element must create a new stacking context.

Live preview Example from MDN 
.background-container {
  background-color: #f4f460;
  width: 250px;
}

#example-element {
  border: 1px solid black;
  margin: 2em;
}

#example-element * {
  mix-blend-mode: multiply;
  color: #8245a3;
}

Syntax

<isolation-mode>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
auto
Applies to
All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
Inherited
no
Percentages
N/A
Computed value
as specified
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 41
Edge 79
Firefox 36
Safari 8
Chrome Android 41
Safari iOS 8

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

mix-blend-mode

Property Baseline: widely availablesince July 2022

MDN The mix-blend-mode CSS property sets how an element's content should blend with its backdrop — the content rendered behind the element within the same stacking context.

Live preview Example from MDN 
.example-container {
  background-color: sandybrown;
}

Syntax

<blend-mode> | plus-lighter

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
normal
Applies to
All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
Inherited
no
Percentages
N/A
Computed value
as specified
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 41
Edge 79
Firefox 32
Safari 8
Chrome Android 41
Safari iOS 8

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

<blend-mode>

Type Baseline: widely availablesince July 2022

MDN The <blend-mode> CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.

Live preview Example from MDN 
.container {
  width: 150px;
  height: 150px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

Syntax

normal | darken | multiply | color-burn | lighten | screen | color-dodge | overlay | soft-light | hard-light | difference | exclusion | hue | saturation | color | luminosity

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 35
Edge 79
Firefox 30
Safari 8
Chrome Android 59
Safari iOS 8

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗