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 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: and . The first one is used with background images and the values work with the images that are just inside the background property of the element. This would be how it looks in the code: CSS data type <background-blend-mode> <mix-blend-mode> In the HTML Blend Modes < = > div class "parent" < = > h1 class "street" </ > h1 </ > div In the CSS { : ( ), ( ), (0, 255, 0); : multiply, darken, 
  normal;
} { : overlay;
} .parent background url "assets/model.jpg" url "assets/textureSteins.jpg" rgb background-blend-mode .street mix-blend-mode 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 allows you to blend the element with the parent element and the background of the own element. <mix-blend-mode> In the HTML: Blend Modes < = > div class "parent" < = > h1 class "child" </ > h1 </ > div In the CSS: { : ( ), ( ), (0, 255, 0); : multiply, darken, 
  normal;
} { : overlay;
} .parent background url "assets/model.jpg" url "assets/textureSteins.jpg" rgb background-blend-mode .child mix-blend-mode 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;
} .multiply mix-blend-mode 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;
} .screen mix-blend-mode 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;
} .overlay mix-blend-mode 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. { : hard-light;
} .hardLight mix-blend-mode 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. { : soft-light;
} .softLight mix-blend-mode 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. { : color-dodge;
} .colorDodge mix-blend-mode 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. { : color-burn;
} .colorBurn mix-blend-mode 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;
} .darken mix-blend-mode Lighten This is made from the lightest RGB values of both layers or images. { : lighten;
} .lighten mix-blend-mode 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;
} .difference mix-blend-mode 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; : ;
} .exclusion mix-blend-mode 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; : ; : ;
} .hue mix-blend-mode 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; : ; : ;
} .saturation mix-blend-mode 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;
} .color mix-blend-mode 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;
} .luminosity mix-blend-mode The information shown above is based on the from MDN and the from Wikipedia. <blend-mode> Blend Modes In summary, blend modes help us to merge the RGB values from layers using for images to be blended inside the background property and the content of the element, and <mix-blend-mode> for elements that want to merge with the parent element. Values that play with RGB channels are Multiply, screen, overlay, high-light, soft-light, color-dodge, color-burn, darken, lighten, difference, exclusion. And values that play with HSL are hue, saturation, color, and luminosity. Now the whole point of doing this is playing with those tools and making different combinations. <background-blend-mode> So the challenge is this: Fork the 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. repo If you just want to take a look at the page that I built where I extracted the pictures just click . here

A CSS Property That Every Web Designer must Know

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 Most Sought-After Programming Languages You Should Learn In 2021

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 Most Sought-After Programming Languages You Should Learn In 2021

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps