← Back to release summary

mix-blend-mode: plus-lighter

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 100)
Intent stage
Shipped

Summary

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.

Standards & signals

Explainers: https://jakearchibald.com/2021/dom-cross-fade

View on chromestatus.com