Color blending with CSS blend-modes
Tags: webdev, css, gimp, design
Published: 2022-02-28 08:43:48

Unlike the latest "future CSS features" presented in [this series](https://dev.to/ingosteinke/series/16136), CSS blend modes have been supported for a long time (CSS-tricks [wrote about blend modes in 2014 already](https://css-tricks.com/basics-css-blend-modes/).

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](https://en.m.wikipedia.org/wiki/Blend_modes) 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: 

![Screenshot: blend(ing) modes in GIMP, Photoshop (web), and using style sheets in developer tools.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r693i61drj9t8qkaco8l.png)

Still, we can see a similarity here. Like [Lea Verou](https://leaverou.me/) 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](https://www.colorexpertsbd.com/blog/darkroom-photo-manipulation-photoshop-walk-history/), many popular digital image editing techniques are now available in style sheets as well. [Proposed  by Adobe and Canon](https://www.w3.org/TR/compositing-1/), CSS blend modes basically work like blending modes in Photoshop, as [Sara Soueidan explained in Adobe's blog](https://blog.adobe.com/en/publish/2015/04/29/an-introduction-to-graphical-effects-in-css#gs.q0hyov) in 2015.

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

{% youtube 8BXQ3zCihYM %}
[Lea Verou: Even more CSS Secrets, recorded at ScotlandJS 2018](https://youtu.be/8BXQ3zCihYM)

There is an [interactive slide show of "Even more CSS Secrets"](https://projects.verou.me/talks/even-more-css-secrets/#intro) that starts with the iconic cutout text effect using
```css
mix-blend-mode: screen
```
[![Screenshot of Lea Verous's even more CSS secrets slide while inspecting blend modes in Firefox developer tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7olzavijevks8adkwrhp.png)](https://projects.verou.me/talks/even-more-css-secrets/#intro)
 
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](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode), these are the possible values:

```css
.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](https://ishadeed.com/article/blending-modes-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!