Photoshop Blend Modes in CSS from The Adobe WebKit Team

  • Tom Kenny

The Adobe WebKit team have just published their work on implementing blend modes in CSS. First of all, I didn’t know Adobe have a WebKit team. Adobe really seem to be committed to contributing to the open web nowadays, which is fantastic. Second, CSS blend modes is something I’ve wanted for a while so it’s great to see the early stages of this in action.

Here’s their description of what blending is:

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.

I decided to try and see what blend modes from Photoshop work by simply trying the different blending modes as values with the -webkit-blend-mode property. If you want to play with the demos yourself, make sure you download the special prototype build of WebKit by Adobe.

Supported:

  • normal
  • darken
  • multiply
  • color-burn
  • lighten
  • screen
  • color-dodge
  • overlay
  • soft-light
  • hard-light
  • difference

Unsupported:

  • dissolve
  • linear-burn
  • darker-color
  • lighter-color
  • linear-dodge
  • vivid-light
  • pin-light
  • hard-mix
  • subtract
  • divide

I found that all out manually and then discovered there’s a list of supported values with images of each. Those of you familiar with Photoshop blend modes will know them well.

Other Findings

Adobe’s demos only show it working with full colour backgrounds but I’ve tried it with background images in CSS and even inline images in HTML and I can confirm they also work with blend modes.

It’s very early days so this obviously isn’t an in-depth look but it’s fantastic to see the power of blend modes coming to CSS. It’s also fun to see what the future of CSS will look like and this is very exciting.