hero

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?

Now in Chrome, Firefox, Opera and soon in Safari 8. 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.