CSS Compositing & Blending

About

Compositing describes how shapes of different elements are combined into a single image. Conceptually, each element is rendered into its own buffer and is then merged with its backdrop. The most widely used compositing operation is simple alpha compositing. (see Simple Alpha Compositing) This spec will introduce additional compositing operators that will enable advanced graphical effects.

Blending describes how colors are "blended" together. Typically, the color of an element and the color of its backdrop are combined to create a new color. This new color replaces the old color and is then composited with the backdrop using the specified compositing mode.

We have put together a set of demos for you. They showcase some of the concepts we propose with CSS Compositing and Blending.

This prototype version will allow you to play with these samples, which are a way for us to explore the implementation options for these features.

Demos

Thanks!
– The Adobe WebKit team

Unless otherwise noted, code and content is licensed under a Public Domain License.