Before the Compositing and Blending specification was introduced, CSS allowed one type of composite operations: simple alpha compositing. This is what the
opacity
property is for. By changing an element’s opacity, the browser makes it translucent so that the colors of its backdrop can show through.Today, two main properties exist that allow us to blend elements and backround images by specifying one of 16 available blend modes. These two properties are
background-blend-mode
andmix-blend-mode
. Let’s get to know each.
Making the Web Sweeter with Food Network and Cupcakes
Adobe’s Web Platform group teamed up with Food Network to experiment with bringing their popular Cupcakes! tablet application to the web. See how we turned beautiful content from Food Network, hardware from Leap Motion, speech recognition, responsive tooling, and new layout and graphics standards into a next-generation web experience.
Canvas Blend Modes, CSS Masks, CSS Clip Paths, Dynamic Masks, Regions, CSS Shapes, Web Speech API, …
Photoshop Blend Modes coming to CSS
If you’re a user of our design applications such as Photoshop and Illustrator, you know how you can create very cool effects with blend modes.
Last year, I joined the W3C and started contributing to the SVG and FX task forces. I am now spending the bulk of my time on editing, discussing and implementing the CSS compositing and blending spec. The new draft will introduce a new CSS property:
blend-mode
Supported values for blend-mode
:
- normal
- plus
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
Bringing blending to the Web →
Compositing and Blending 1.0 Spec (Editor’s Draft) →