This proposal adds a plus-lighter value to the mix-blend-mode property. Plus-lighter adds the source and destination colors multiplied by their respective alphas. This operation is useful when cross fading between two elements that may contain common pixels. In that case, plus-lighter ensures that the common pixels do not change in appearance as opacity changes from 0 to 1 on one element and from 1 to 0 on the other.

Motivation

mix-blend-mode: plus-lighter allows two elements to cross fade by changing their opacities from 0 to 1 on one element and 1 to 0 on the other element, which keeping common pixels unmodified.

Specification

Specification link


Specification currently under development in a Working Group

Status in Chromium

Blink>CSS


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Intent to Prototype url

Intent to Prototype thread

Search tags

plus-lighter,

Last updated on 2022-04-27