Create Monochromatic Color-Tinted Images With CSS blend

Six months ago 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 color modes before using them in your sites.

Blends

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

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 PhotoShop, 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 IE11)
• 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 very recent browsers: you could use a variation of Lea’s technique as a fallback for older versions of Webkit: (-webkit-filter: grayscale(100%) sepia() hue-rotate(105deg) brightness(90%) saturate(110%) contrast(140%);), with an SVG equivalent for Firefox.

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 appearence 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. Check out the complete profile photo code