Blend Modes

#CSS Blend Modes

##What is it?

You can use blend modes to mix the content of an element with everything behind it.

You may have already seen the advanced blend modes before in Photoshop: color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, normal, overlay, saturation, screen, soft-light. If not, don’t worry, here is an example:

CSS Blend Modes Example — The "CSS Blend Modes" text from the image above is gray, but it uses the difference blend mode to blend with the flower, and the result is really compelling. Check out this pen to see it in action.

The Adobe Web Platform team is working on bringing blend modes to the HTML world, by contributing to the Compositing and Blending Level 1 specification as well as to the actual implementations in the open source browsers.

##When can I use it?

The background-blend-mode CSS property is available now in Safari, Firefox, Chrome, and Opera.

The mix-blend-mode CSS property is available now in Safari and Firefox. In Chrome and Opera, it is behind an experimental features flag.

The isolation CSS property is available now in Safari. In Chrome and Opera, it is behind an experimental features flag. It is not yet implemented in Firefox.

For both background-blend-mode and mix-blend-mode, Safari does not yet support the hue, saturation, color, and luminosity blend modes (i.e. the non-separable blend modes).

For a view of current and upcoming browser support, check out caniuse.com.

Learn how to enable this feature in popular browsers.

##Where can I learn more?

There are many resources on the web that can help you to learn what the blend modes are and how you can use them to create compelling visual effects.

As Dudley Storey says in PhotoShop In The Browser: Understanding CSS Blend Modes, you could just keep choosing from the list of modes until the result looks good. Or you could read his article to get an overview of the different kinds of blend modes. Also check out Getting to know CSS Blend Modes by Shwetank Dixit.

To deepen your understanding, do check out the Compositing and Blending Level 1 specification. There are a lot of examples to help clarify the technical talk.

And to inspire you, check out Bennett Feely’s article about background blend modes and his CodePen collection, as well as the Background Blend Modes and Blend Modes collections from the Adobe Web Platform team.

We’ll be sharing more information and updates from our blog and Twitter account.