Introduction to CSS Blend Modes

CSS blend modes is currently a W3C Candidate recommendation. The use of blending has been a common practise in static designs but with the use of CSS blend modes it will soon be possible to apply blending to dynamic content. Blending is when one image will blend into the image underneath, using different choices will produce different results. This post will be a brief introduction to CSS blend modes, and links to further reading.

Browser Support

At the moment the browser support is as followed:

Internet Explorer: Not Supported
Firefox: 30 upwards
Chrome: 35 upwards
Safari: 8
Opera: 22 upwards

To experiment in Chrome you will have to Chrome Canary and then go to chrome://flags/ and enable “experimental Web Platform features”. It is also possible to experiment in Safari Yosemite edition.

To keep up to date with support then bookmark this link: Can I Use CSS Blend Modes

CSS Blend Mode Support

How does it work

Mix Blend Mode Property

The mix-blend-mode property has the the following values for blend modes:
Multiply, screen, overlay, darken, lighten, color-dodge, color burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity and also normal blend mode which resets it because it specifies no blending.

Isolation property

Using the mix blend mode will blend with all elements in the backdrop that overlays it, but if you wanted it to only blend with certain elements then this would be possible using the isolation property.

Background-blend-mode

The background-blend-mode property defines the blending mode of each background layer. By applying this property it will blend with the element’s background layer that is beneath it, and the element’s background color.

Other possibilities

It is also possible to use blend modes in the canvas SVG, and videos.

Demonstration

This is a basic code pen that demonstrates the ability of CSS Blend Modes:

See the Pen CSS Blend Modes by Michael Gearon (@michaelgearon) on CodePen.

Adobe Codepen

Adobe have also produced a useful demonstration of background blending modes on Codepen, as well as a blog post linked below

See the Pen CSS Element Background Blend Modes by Adobe Web Platform (@adobe) on CodePen.

Further Reading

This blog post provided a basic look at the CSS blend modes property, here is a list of useful links to read and understand more, also check out other examples on Codepen:

W3C- Compositing and Blending Level 1
CSS Tricks- Blend Modes
Adobe- CSS Background Blend Modes are now available in Chrome Canary and Webkit Nightly

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.