Color blending with CSS blend-modes

Unlike the latest "future CSS features" presented in this series, CSS blend modes have been supported for a long time (CSS-tricks wrote about blend modes in 2014 already.

Blend modes, also known as blending modes or mixing modes in digital image editing, allow web developers to specify color blending programmatically to achieve outstanding visual effects like cutout text.

CSS uses similar terminology as image editing software like GIMP or Adobe Photoshop. So do we only need to learn it once? Yes and no. Wikipedia's Blend Modes article explains the basic concepts and algorithms behind blending layers of digital image information. Beyond the basic concepts, the names for specific blend modes in CSS and image editing differ, and don't have the same names in Photoshop and GIMP either. In fact, they don't even appear in the same order:

Still, we can see a similarity here. Like Lea Verou showed this is much like Photoshop, and it was in fact proposed and introduced to CSS by Adobe and Canon. You can also find it in GIMP, and, as it's CSS, in low code web design tools like Webflow.

Like digital image manipulation was inspired by analog photography retouching, many popular digital image editing techniques are now available in style sheets as well. Proposed by Adobe and Canon, CSS blend modes basically work like blending modes in Photoshop, as Sara Soueidan explained in Adobe's blog in 2015.

Lea Verou showcased techniques using blend modes and other, lesser known, CSS properties revealing "even more CSS secrets":

Lea Verou: Even more CSS Secrets, recorded at ScotlandJS 2018

There is an interactive slide show of "Even more CSS Secrets" that starts with the iconic cutout text effect using

mix-blend-mode: screen

Blend modes like darken, exclusion, or multiply might be hard to understand, but to get an intuitive understanding of what's going on, we can try it out in our browser's dev tools or using a graphics application like Photoshop (which is now available as a web application as well) or GIMP (which is, in my opinion, enough even for slightly advanced image editing unless you are a graphic design pro or a photography enthusiast. As a web developer, I haven't been using Photoshop for 10 years, except for making a screenshot for this blog post).

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background. Quoting MDN on mix-blend-mode, these are the possible values:

.example {
/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: revert;
mix-blend-mode: unset;
}

MDN also has a visual overview, as it's hard to explain in words, what is happening. But there are some rules of thumb that are easy to learn for a start, like

With multiply blend mode, black is cutout and white is opaque. With screen blend mode, white is cutout and black is opaque.

@shadeed 's Blending Modes in CSS tutorial features practical use cases and helpful codepens to try out as well.

Conclusion

Have fun using blend-modes and follow me to discover and rediscover awesome CSS features!