Blend modes are common in graphic design, but until now they could only be achieved on the web through static images. With blend modes in browsers, you can get these same effects easily without creating pre-rendered images. Discover how to combine this capability with animation and responsive design techniques to create beautiful and engaging compositions.

Blending describes the technique for melding together the color of two or more stacked elements or areas in a screen graphic. Typically, the color of an element and the color of its backdrop are combined to create a new color.

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). The Compositing and Blending Level 1 Editor's Draft introduces additional compositing operators that enable advanced graphical effects.

Play

Learn

Feedback

Got a comment to make on the Compositing and Blending Level 1 Editor's Draft? Just use the www-style@w3.org mailing list on the W3C website. Please use the identifier "[css-compositing]" in the subject of your email. Or, let us know on Twitter, @adobeweb.