Quick Dig: CSS Blend Modes—Practical Uses
CSS blend modes aren’t exactly new. At the moment of writing, most browsers (at least desktop versions) have implemented mix-blend-mode and background-blend-mode. What makes them tricky to use is generally two parts: not knowing how the different modes work and not knowing when they’re useful.
This problem is actually not limited to web developers: the fact is the same issues are prevalent in the world of digital photography as well. Partially this is because image editing has evolved in ways that make adjustments using layer blending obsolete or too bulky to be useful; there are better tools to use than blending modes for most tasks, which meant for a lot of photoshop users figuring out blending modes have become less prioritized.
Recently I attended a talk by Steve Laskevitch on the subject of Photoshop blend modes, which provided an overview of the different blend modes and a number of interesting use cases that may extend to web as well. This post will mainly focus on sensible general use-cases for the web.
What are they?
A simple way to describe blend modes is the way a single pixel gets produced as a result of two pixels that sit on top of each other. The most natural way is to treat the pixels as separate, opaque objects: we would see whichever pixel is on top. This mode is called the normal mode and is the default behavior for all elements. With the introduction of stacking contexts and z-index, it st
Most blending modes are formulaic in nature, with a functional relationship between the two underlying pixels producing an output pixel under predefined rules. The breakdown of all modes available is available in the specification document of blending.
Noteworthy facts from the spec doc: the editors include engineers from Adobe and Cannon. This in fact explains why the blend modes available for CSS match those available in Photoshop. This is definitely for the better that the leading vendor of image editing software is leading the effort to standardize a key functionality for the open web. (Side note: perhaps Adobe did learn something from the downfall of Flash.) This also means lessons learned from photoshop can carry over to a large extend to web as well.
Is it really useful?
Realistically? I’m doubtful. For one thing, a large portion of photo/image editors have no real use for many of the available modes. Some, particularly for visual artists, can produce fascinating effects which could be useful for the web in an experimental way, but the use of blending modes for general purposes are fairly limited.
That said, certain uses exist, and we’ll explore them in the next section.
Using blending modes: the simple, practical stuff
We will focus on two modes for this section, multiply and screen. The spec docs explain these two modes with their underlying formulas:
multiply: resulting pixel is a product of the two pixels,
i.e.a × bscreen: inverse of product of the inverses of the two pixels,
i.e.1 – (1 – a) × (1 — b)
In most cases these two modes produce a fairly predictable range of shades, but they are most useful for the edge cases: 0 and 1, or, black and white.
This makes mathematical sense, since multiplication with 1 and 0 produces mathematically stable outputs. E.g. a × 1 = a and a × 0 = 0. In words, using multiply with white produces the other color intact, while multiplying with black leaving black. It also follows for the same reason that screen does the exact opposite, where black produces the other color and white is left white.
Example: Logo
To show how this may be useful on the web, I have a hypothetical logo to the left. It is in two colors, black(#000000) and white(#FFFFFF). We hired an incompetent designer on this project so we ended up with an image file that has a white background. This was not a problem when we made T-shirts with this logo since we were using white shirts, but then ran into a problem: we want a non-white background on our webpage.
The default behavior here (mix-blend-mode: normal;) looks pretty sloppy in a early internet kind of way. The fastest improvement to this situation is to make the white background of our logo match the page background instead.
Knowing what we know about mix-blend-mode, we can do exactly that by applying multiply.
For a single-line CSS fix, this actually worked in a way. Notice that the white circle within our logo is gone as well, which may or may not be part of your intent: this works if the white in our logo is always negative space, which may not work for more complex designs.
Now that this works, we’ll look at what happens when we use a dark background instead with the same logo.
Predictably we can’t use multiply here since it will produce a black logo on a dark background. To increase contrast between our logo and background, we need to flip the black/white image. The quick way to do this is by applying a white background immediately under our image and apply mix-blend-mode: difference;. HTML-wise this can be done by creating a wrapper <div> element around our <img> element, applying background: #fff; to the wrapper <div> and applying the blend mode to the child element.
That worked exactly how we wanted. Now to clean this up, we need to clean up the black background. The blend mode for that effect is screen.
Again, the same warning with multiply applies here too; black is treated as negative space as opposed to a color.
Is it really useful? (Continued)
While it’s cool that this technology is now available for web developers, for blending modes to be useful it will require a general understanding of when and how to use each specific mode. This is a problem because, for the most part, training in Photoshop technology is not a priority for developers.
Further, in contexts where there are designers available, the likelihood that one has to handle image assets programmatically in the front end is rather slim; for each use case, it’s likely that the designer would rather opt to produce the desired effect using editing software and save it as a static asset. Even if you don’t have a dedicated design team, this is likely the better approach since CSS is a likely performance bottleneck.
That said, there are certainly edge cases where the above example may work seamlessly; one case I heard from Steve after the talk is using it to reconcile backgrounds in <iframe> elements.
In any case, knowing that this tool exists and getting a better sense of when and how it can be useful should be a valuable learning experience.
