The Logic Behind Blend Modes: Multiply and Screen

There are many types of blend modes to use inside Adobe Photoshop but here I will discuss about the blend modes “multiply” and “screen” which are the two of the most used blend modes. I will share you what I’ve learned after watching the advanced course for Adobe Photoshop CC.

Multiply – this blend mode which is one of the most frequently used among blend modes. I’m sure most of us use this blend mode without being aware how this blend mode really works. But that’s very simple. Multiply simply eliminate the bright luminance level of the selected layer and only retain the dark parts of the layer. You can try it on your end to see what I’m talking about.


Screen – screen is simply the extremely “opposite” of multiply. Screen on the other hand eliminates the dark parts/pixels of the certain layer. Screen is among of which frequently used among blend modes in Adobe Photoshop.

Use rem and em

The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

html { font-size: 62.5%; } //instead of having 16px default font we can use 62.5% font to make 1rem equivalent to 10px
body {
font-size: 14px; /*We can always add a fallback font incase the user use an older browser version*/
font-size: 1.4rem; /* =14px */
h1 {
font-size: 24px;
font-size: 2.4rem; /* =24px */

The em unit is almost the same unit as rem but is relative to the font-size of the parent.

for example I have this code

<div class="parentdiv">

See the font size of the paragraph after adding font size in parent div

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
.parentdiv {
font-size: 24px;
p { font-size: 2em; } /* = 48px */