Compositing And Blending In CSS

css-blend-modes

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 and mix-blend-mode. Let’s get to know each.

Compositing And Blending In CSS →

Related:

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, …

Making the Web Sweeter with Food Network and Cupcakes →

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) →