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.
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
How does it work
Mix Blend Mode Property
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.
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
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.
It is also possible to use blend modes in the canvas SVG, and videos.
This is a basic code pen that demonstrates the ability of CSS Blend Modes:
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
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.