Web Directions Year round learning for product, design and engineering professionals

Jessica delivered a very well-received presentation at Respond 16 on advanced CSS image techniques, rather precociously titled “Farewell, Photoshop”. A section of this talk focused on using Blend Modes in CSS, and Jess wrote us an article on that for Scroll Magazine.

Since CSS blend modes were also mentioned in a couple of other presenters’ talks, we figured it was worth giving the topic a bit of extra love by making it our Idea of the Week.

You can also read Jessica’s article in the first edition of our rebooted Scroll Magazine.

Blend Modes in CSS

What is blending?

Generally, when two or more pixels overlap, our screen just shows us the pixel that’s on top. If our topmost pixel has a luminosity value of 1 (white), and a pixel below it has a luminosity of 0 (black), we generally only care about the information we can get from the topmost pixel.

Rather than let perfectly good pixels go to waste, we can opt to blend our topmost pixel with those below it. The information from the black pixel suddenly becomes useful. If you want the darkest pixel to show, you can compare the pixel’s luminosity values and return the lowest value.

Alternatively, you could multiply these values together, and get an entirely different pixel. Scale this to dozens, hundreds, or thousands of pixels, and the result is an entirely different image!

blend-mode

Rather than getting our hands dirty and performing these calculations ourselves, CSS has been kind enough to give us 16 keywords, each representing a ‹blend-mode›. Each ‹blend-mode› is defined in the W3C Compositing and Blending Specification, but if you’ve ever used Adobe Photoshop, they will be very familiar.

While each blend mode carries out unique operations, they can be broadly categorised by their resulting effect:

Each blend mode works in the same way as Photoshop, too. This isn’t an accident: Adobe played a very active role in shaping the Compositing and Blending Specification, and subsequently bringing blend modes to the web. Remember to thank Adobe when you cancel your Adobe Creative Cloud subscription!

background-blend-mode

The background-blend-mode property can be used on all HTML elements. This property allows us to blend the layers of an element’s background. To get started, you will need an element with at least one ‹image› provided via the background or background-image properties. With just one background-image, you will only notice an effect if you have provided a ‹color› to the background-color property (because otherwise it has nothing to blend with).

background: url(‘image.jpg’), 
            orange;
background-blend-mode: exclusion;

Rather than blend with a block of color, we can blend images as well, by specifying multiple images in our background.

background: url(‘top-image.jpg’),
            url(‘bottom-image.jpg');
background-blend-mode: lighten;

Just like you can provide a series of comma separated ‹image› values to background-image,you can specify different ‹blend-mode› values to background-blend-mode. This applies lighten to the first image, and darken to the second image. Whilst we have three layers, the bottom most layer does not have anything to blend with, so there is no need to provide a third ‹blend-mode›.

background: url(‘top-image.jpg’),
            url(‘bottom-image.jpg’),
            orange;
background-blend-mode: lighten, darken;

mix-blend-mode

You can use this property on any element, which means they can be used with SVG elements in addition to HTML elements. Whilst background-blend-mode restricts blending to within the element, mix-blend-mode blends different elements together.

img {
    mix-blend-mode: multiply;
}

What can you achieve with blend modes?

Replicating Prototype Functionality

Perhaps the most obvious use case for blending is directly replicating a prototype given to you that uses blends. If you or a team member are comfortable with Photoshop, there is a large chance you will come across a prototype with blending between layers. Every 9/10 prototypes I come across are Photoshop files- people will use If you export an asset with a blend mode, it will not look the same in the browser.

If the visual result is not drastically different, you can tell yourself on that no-one will notice – but sooner or later, you won’t be so lucky. I had a fairly good run, up until a certain airline logo.

In the provided prototype, the logo casts a shadow behind it. Once exported, the result is considerably different:

Previously, if you had come across this issue, you had a few options:

1. You, or whoever built the prototype, can go back and change the original design. Compromising on a design (especially when you don’t have to!) is frustrating in and of itself;slowing down the build time and waiting on a resolution is more so. In this situation, the prototype was provided by another company entirely.

2. Rather than compromising the initial design, you can export both the initial asset, as well as any affected layers. The design remains intact, but potentially at the expense of the end user:more layers = larger size, more colours = higher file size. Using images of entire scenes also means that even trivial changes such as layout require a trip to an image-editing program.

But, now we have blend modes! If your prototype uses one of 16 blend modes, you’re in luck- you don’t have to make this choice anymore. We can simply export our asset and apply the appropriate ‹blend-mode›, rather than interrupt the development process.

Better Backgrounds

When I first started working in front-end development, backgrounds were a major pain point for me.A background takes up a huge part of your page, and whilst those beautiful, high resolution backgrounds with ~343898 colours can help set the tone of the page, I would just see hundreds of kilobytes.

You could lower the file size by repeating the background image, but getting one to tile perfectly can be difficult to achieve. If the user instantly recognises a poorly executed pattern, their focus has been taken away from your content. It felt like a lose-lose situation.

Nowadays, I’m much more excited by backgrounds! A very popular technique for textured backgrounds is through overlaying noise. Tiled noise by itself can be boring and as mentioned,when it is obviously repeated, it can be distracting. If we blend a small, tiled data-uri with a gradient, even when our image repeats, no tile is identical. We can have a rich, interesting, background, with even making a network request!

What problems will you encounter?

Stacking Context

When working with mix-blend-mode, the effects you will obtain depend on the order of the elements on your page. The order of elements, at least to me, is not always intuitive. There are a number of properties that can affect the order of your elements, some more obvious than others: mix-blend-mode, position, transform, opacity, -webkit-overflow-scrolling, will-change …

When dealing with your own code, you can learn and make adjustments to the order to best suit your needs. But maybe you’re using the Latest and Greatest Framework TM, which has its own ideas about what order your elements should be? Or thinks that a z-index of 10,000 is appropriate? It may come down to choosing between the library or using mix-blend-mode, unfortunately.

Furthermore, you may run into issues if you don’t have complete control over the environment your code will run in. I work in mobile web advertising, and I very rarely know where my work will be displayed, let alone have the ability to test it. Subsequently, for many of my projects it has been better to err on the side of safety, where I prefer to use background-blend-mode as its results are predictable.

Browser Support

background-blend-mode and mix-blend-mode is supported by all major browsers, with the exception of Internet Explorer and Edge (with both properties under consideration for development in Edge). With OSX Safari and iOS Safari, the Component group blends (i.e. hue, saturation, color, and luminosity) are not yet supported. This is useful to know in advance, lest you toggle blend mode values whilst squinting and telling yourself that you totally see a subtle difference – no, no you can’t. These ones are unfortunately super fun, but so are the rest! In the meantime, you’ll get a lot of mileage out of darken, lighten, screen and multiply.