A CSS Property That Every Web Designer must Know

I am Javier, a guy starting in this world of web development. My background is the filmmaking business, especially the video edition. I am writing this article to help guys like me that are learning web development or everyone that considers the design or the “look” of a webpage one of their passions. Back in my days of video-editor, one cool thing that I found in the software video and design editors was the ability to blend two images or more in order to display better. So if you just put an image in a given color background you can start to discover how the different values can make interesting looks.

Blending modes

It is a CSS data type that handles how elements overlap, it takes the color of the layers or elements stacked, mix them and create a new combination or output. You can play with blend modes with two CSS properties:

<background-blend-mode>

<mix-blend-mode>

In the HTML

<div class="parent">            
  <h1 class="street">Blend Modes</h1>    
</div> 

In the CSS

.parent {
  background: 
      url("assets/model.jpg"), 
      url("assets/textureSteins.jpg"),  
      rgb(0, 255, 0);
  background-blend-mode: multiply, darken, 
  normal;
}
.street {  
  mix-blend-mode: overlay;
}

In this case, we use three images. We can specify one blend mode per each if the number of modes don’t match with the number of images the modes will be repeated until everyone gets a mode, or they will be truncated if there are more modes than images.

The second

<mix-blend-mode>

In the HTML:

<div class="parent">
  <h1 class="child">Blend Modes</h1>
</div> 

In the CSS:

.parent {
  background: 
       url("assets/model.jpg"), 
       url("assets/textureSteins.jpg"), 
       rgb(0, 255, 0);
  background-blend-mode: multiply, darken, 
  normal;
}

.child {
  mix-blend-mode: overlay;
}

Let’s start to play with different values and understand how they work.

Normal

This value doesn’t do anything to the RGB values of the top and bottom layers. 

Multiply

Let’s say you have a logo with a white background, over a div with a picture as a background and you want to display just the logo:

This is how the code looks:

.multiply {
  mix-blend-mode: multiply;
}

The “multiply” value multiplies each pixel of both layers top and bottom of the RGB channels. So in order to understand the process, is better with a picture:

Now it makes sense that all the colors went out except the blue in the final result with the multiplication process because in the blue layer the other channels, red and green, are zeroes. So we have a final result of just blue in its different tones. 

Screen

What it does is takes the values of both layers, invert them, multiply the values of the two layers and then invert the final result again. This is useful when you have an image over a black background and you want to remove the black background of the picture. I used it in video edition when I wanted to add an explosion or a fire that was in a totally black background, so I could add the video over another video looking like a real explosion.

.screen {
  mix-blend-mode: screen;
}

Overlay

This value gives more contrast when you use it over the same image. It mixes the values of multiply and screen in a way that when areas are darker than 0.5 multiply function works, and in areas more than 0.5, the screen function works which means that images become more contrasty. In other words, dark areas of the base image make the top dark, light areas make it lighter. The mid-tones don’t change. I used a degrade from black to white in order to see the effect.

.overlay {
  mix-blend-mode: overlay;
}

Hard-light

It uses Multiply and screen too in the same way as Overlay does but instead of being affected the top layer for the base layer this time is the base layer affected for the top layer, it’s just a swap. So the result pretty much is the same as Overlay.

.hardLight {
  mix-blend-mode: hard-light;
}

Soft-light

This value is near to Overlay. The contrast created is less than the one in the overlay value. In this case, we don’t get pure black or pure white... well in theory. You can judge the difference yourself.

.softLight {
  mix-blend-mode: soft-light;
}

The contrast is less than the one produced by the overlay.

Color-Dodge 

This effect is taken from photography when in the revelation process the negative made a positive on the photographic paper. So they avoided giving light in certain areas. The final result ends with those areas to be clearer than the other ones. Here I used a colored degrade with a low luminance value.

.colorDodge {
  mix-blend-mode: color-dodge;
}

Color Burn

This takes the bottom layer, inverts the values, then divides the result by the top layer and then inverts the value again. This value darkens the top layer by showing the colors of the bottom layer. Again I used the colored degrade as a base layer.

.colorBurn {
  mix-blend-mode: color-burn;
}

Darken 

The final color is made of the darkest colors of both layers, in other words, just keep the smallest values of both layers of the RGB channels.

.darken {
  mix-blend-mode: darken;
}

Lighten

This is made from the lightest RGB values of both layers or images.

.lighten {
  mix-blend-mode: lighten;
}

Difference 

This subtracts the lightest of the RGB values from the smaller ones. The blending with white just inverts the top layer. That is why we see a degrade in my beard because the white slowly disappears and the tone of my t-shirt is an inverted version. 

.difference {
  mix-blend-mode: difference;
}

Exclusion

The result is like “difference” with less contrast. With black nothing happens that’s why my hair didn’t change in the top part.

.exclusion {
  mix-blend-mode: exclusion;
  width: 110%;
}

We have seen really cool effects in these values that play with the RGB  values of both layers but now we are going to see blending modes that play with the Hue, Saturation, and Luminosity.

Hue

In this case, the values that are taken are Hue, saturation, and luminosity, not the RGB values. In this case, the hue is taken from the top layer. The saturation, and luminosity from the bottom layers. In the first example, the hue was from my picture and saturation and luma from the degrade, in the second I swapped the layers or divs. 

.hue {
  mix-blend-mode: hue;
  width: 110%;
  margin: 0;
}

Because my picture doesn’t have too much saturation the colors of the degrade are almost gone, remember it is now on top and in the final result the hue is taken from it.

Saturation

This keeps the luma and hue of the bottom layer and takes the saturation of the top layer for the final result. Remember the first example is degrade bottom picture top and then the opposite. So the first example shows that my picture didn’t have too much saturation. Meanwhile, the second example shows the nice saturation of the degrade boosting the luma and hue of my picture. 

.saturation {
  mix-blend-mode: saturation;
  width: 110%;
  margin: 0;
}

Color

This keeps the luma of the bottom layer and preserves for the final result the saturation or chroma and the hue of the top layer. One can say that the luminance of the red is less than the yellow when seeing the result of the first example, in the second the saturation and hue are visible because the degraded layer is on the top.

.color {
  mix-blend-mode: color;
}

Luminosity

This mode preserves the hue and chroma or saturation of the bottom layer while preserving the luminosity from the top layer. Basically it is the same as color just swapped the layers, for this reason, it is not necessary to see the results.

.luminosity {
  mix-blend-mode: luminosity;
}

The information shown above is based on the <blend-mode> from MDN and the Blend Modes from Wikipedia.

In summary, blend modes help us to merge the RGB values from layers using

<background-blend-mode>

So the challenge is this: Fork the repo and in the assets folder change the file “model.jpg” for a selfie of you showing the different results(Name your picture model.jpg) would be great to see how these modes work in different faces and also would be a nice opportunity to master the knowledge.

If you just want to take a look at the page that I built where I extracted the pictures just click here.