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.
You can use blend modes using CSS properties or use them in a HTML Canvas element using the Canvas 2D API.
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.
For current browser implementation status, check out our CSS Blend Modes browser support matrix or look at broad overview of support for canvas blend modes on caniuse.com.
- Compositing and Blending Level 1 – W3C Editor's Draft
- Our blog posts on blend modes and compositing
- Preview and play with various uses of blend modes as codepen.io pens
Got a comment to make on the Compositing and Blending Level 1 Editor's Draft? Just use the email@example.com 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.