Part of the Blend Modes Reading List

In an earlier article I wrote about CSS blend modes and how they were going to change the web, allowing page elements access to design techniques previously reserved for desktop publishing applications.

We’re now on the cusp of that revolution: background-blend-mode is fully supported in the latest versions of Chrome, Firefox, Safari and Opera. These advances create the perfect opportunity to learn about blend modes before using them in your work.

Blends

As you probably know, CSS supports multiple element backgrounds, with the first background layered on “top”, and subsequent ones placed underneath: Illustration of CSS blending layers

Assuming that the top-most layer was large enough (or tiled), the “base” color would never be seen: it was provided as a fallback, nothing more.

Luminosity modifies the luminosity of the blending layer to that of the base layer in a set of background images, without altering hue or saturation. If the base layer is a flat color and the blending layer a photograph, the result is a monochromatic image: a photograph with its original colors replaced with the entire range of the hue from the base layer.

This technique is often used to create a sense of uniformity and visual cohesion on a page. The 2014 speakers profile images for CSSconf, which I have just returned from, is a good example.

Traditionally, color-cast images would be created and exported using , then swapped on mouseover using JavaScript: a long and arduous process, especially if the client changes their mind. Lea Verou, who designed the CSSConf site, avoided that by using a complex series of filters to switch the natural colors of the photographs: realistically, the best that could be achieved at the time.  Now, as Lea herself pointed out a few days ago, we have a much better option: 

a {
	border-radius: 50%;
	overflow: hidden;
	background-blend-mode: luminosity;
	border: 5px solid #000;
	display: inline-block;
	width: 16rem; height: 16rem;
	transition: border .4s linear;
	background: url(profile1.jpg) no-repeat center hsl(200,50%,50%);
	background-size: cover;
}

By choosing an appropriate base layer and blend image, all kinds of effects can be created.

Ready For Prime Time?

Using background-blend-mode comes with a few considerations:

  • So far, Microsoft has not given any indication that it will support blend modes (it is listed as “under consideration” for <canvas> and CSS in Edge)
  • Not surprisingly, background-blend-mode can only be applied to backgrounds. That means that you will need to be careful when sizing elements that use it: remember, background images do not affect the size of an element.
  • background-blend-mode only works in fairly recent browsers: you could use a vendor-prefixed variation of Lea’s technique as a fallback for older browsers: (filter: grayscale(100%) sepia() hue-rotate(105deg) brightness(90%) saturate(110%) contrast(140%);).

When using the property, you should be aware of a few things:

  • The default value for background-blend-mode is normal (not, as you might assume, none).
  • Blend modes can’t be animated. However, you can create the appearance of a background-blend fading by transitioning to background-color: transparent;, as shown in the example above.
  • Using a base layer color between black and white with background-blend-mode: luminosity will make the blend layer appear greyscale.

So are blend modes ready for use in sites today? I would say it’s very close: once Mobile Safari has the feature, I’d certainly use it for elements like those I’ve shown above.  Some might complain that a page “doesn’t look the same in Internet Explorer”, but it’s important to remember that background-blend-mode is a progressive design effect: IE 9 users can still see the original photographs. We need to get beyond the “it doesn’t look the same in browser x” arguments and resolve to answer a single argument: can the page be used? Using background-blend-mode can enhance a web page, and it’s absence or lack of support should not detract from basic communication.

Images via the (sadly, discontinued) FaceBox

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/vrwcl