DEV Community

Cover image for Color blending with CSS blend-modes
Ingo Steinke, web developer
Ingo Steinke, web developer

Posted on

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:

Screenshot: blend(ing) modes in GIMP, Photoshop (web), and using style sheets in developer tools.

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
Enter fullscreen mode Exit fullscreen mode

Screenshot of Lea Verous's even more CSS secrets slide while inspecting blend modes in Firefox developer tools

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;
Enter fullscreen mode Exit fullscreen mode

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.


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

Top comments (3)

ingosteinke profile image
Ingo Steinke, web developer

Does anyone have a comparison table of corresponding blend mode names in CSS, GIMP, and Adobe Photoshop?

miomio13 profile image

Hi. I have a sticky header with a blue svg icon.
How can i make it change its color to white when it's on a section that has the same blue color for background?
Then again become blue after that section...

I have tried mix-blend-mode but the color turns yellowish...

ingosteinke profile image
Ingo Steinke, web developer

Hi @miomio13 unfortunately your link got truncated, so I can't see your code. If the SVG is inline markup (starting with <svg as opposed to an <img element), you can use fill=currentColor, stroke=currentColor etc. in the SVG markup, then you can change the header's current color by changing color: of CSS.