Just a week ago I knew nothing about CSS blend mode. Luckily I had bookmarked a tweet below from Chris Coyier. So I started digging deep to find out what these guys are. It’s funny how background-blend-mode and mix-blend-mode work.

background-blend-mode

The background-blend-mode property defines how the element’s background image should blend with the other and with the background-color of the element.

.blend-this {
  background-image: url('image.png');
  background-color: red;
  background-blend-mode: darken;
}

Values

/* One value */
background-blend-mode: normal;

/* Two values, one per background */
background-blend-mode: darken, luminosity;

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

normal: The background-color will not bleed through the background-image.

multiply: The background-image and background-color are multiplied and typically this leads to a darker image than before.

screen: Both image and color are inverted, multiplied, and then inverted again.

overlay: The background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.

darken: If the background-image is darker than the background-color then the image is replaced, otherwise it is left as it was.

lighten: If the background-image is lighter than the background-color then the image is replaced, otherwise it is left as it was.

color-dodge: The background-color is divided by the inverse of the background-image. This is very similar to the screen blend mode.

color-burn: The background-color is inverted, divided by the background-image and inverted again. This is similar to multiply.

hard-light: If the background-image is lighter than the background-color then the result is muliply or if it is lighter then the result is screen.

soft-light: The final result is similar to hard-light but softer in that it looks like a diffused spotlight has been placed on the image.

difference: The result by subtracting the darker color of the background-image and the background-color from the lightest one. Often the image will have a very high contrast.

exclusion: The result is very similar to difference yet with a bit low contrast.

hue: The result is the hue of the background-image combined with the luminosity and saturation of the background-color.

saturation: Keeps the saturation of the background-image whilst mixing the hue and luminosity of the background-color.

color: Keeps hue and saturation of background-image and the luminosity of the background-color.

luminosity: Luminosity of the top color is preserved whilst using the saturation and hue of the background-color.

Chaining a number of blend modes

Each background layer can only have a single blend mode, but if we’re using multiple linear gradients, for example, each of them can have its own blend mode which makes a beautiful view:

This is achieved by listing these values in order of the background layer that you’d like to affect:

.blend-this {
  background: linear-gradient(green 0%, red 90%), linear-gradient(to bottom, black 0%, orange 90%), url('image.png') 10px, url('image.png') 10px;
  background-blend-mode: screen, difference, lighten;
}

The first linear gradient has the screen blend mode, the second linear gradient has difference and the third background image has lighten. You can read more about background-blend-mode at w3schools.

mix-blend-mode

The mix-blend-mode property specifies how an element's content should blend with its direct parent background.

Default value:    normal
Inherited:    no
Animatable:    no

Syntax and Values

/* 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;

normal: This is the default value. Sets the blending mode to normal
multiply: Sets the blending mode to multiply
screen: Sets the blending mode to screen
overlay: Sets the blending mode to overlay
darken: Sets the blending mode to darken
lighten: Sets the blending mode to lighten
color-dodge: Sets the blending mode to color-dodge
color-burn: Sets the blending mode to color-burn
difference: Sets the blending mode to difference
exclusion: Sets the blending mode to exclusion.
hue: Sets the blending mode to hue
saturation: Sets the blending mode to saturation
color: Sets the blending mode to color
luminosity: Sets the blending mode to luminosity

Here is a demo I made at Codepen for mix-blend-mode: On the left, it is set to darken and difference (multiple blends) and on the right, it is set to hue.

/Open it with a PC in fullscreen mode, it crashes on small screen🤨 NOT responsive!/

I made two to demonstrate the fact that it works with both SVG and HTML(so on the left are SVG circles and HTML on the right side).

If you would like to read more about this check out an article about blend modes at web.dev

You might want to have look at the tweet below.

We come from different places, and what we go through differ in the same manner. Some of us go through harsh moments, treatments, and life’s challenges but twitter and other social media platforms can help us push through such hard times, one step forward.

Why? Social media is a world on its own, you can find all kinds of people. But the best part is, good people can come from nowhere and give you words as if they know what you’re going through. I just thought this tweet can be such a one.

Alright, friend this is how far I could go, thank you so much. If you learnt something new or there’s somewhere you think I need to improve, feel free to let me know in the comments section below.

👋☺👋

Cover photo by Kyle Williamson on Unsplash