Bobby Meyer
developer/designer
Multiply Effects in CSS
December 15, 2022
Desaturating a photo and setting the blending mode to multiply can be a useful technique, particulary in monochrome designs. It helps maintain a cohesive look and feel, and can also contribute to a more dramatic, moody look.
Desaturating a photo means reducing the saturation of its colors, or removing the color entirely and turning it into a grayscale image. This can be useful in monochrome designs because it allows you to create a cohesive look using different shades of gray, rather than using a variety of colors.
Setting the blending mode to multiply in this case can help to create darker tones and add depth to the design. Multiply blending mode multiplies the colors of the layer being blended with the colors of the layer below it, resulting in a darker image. This can be useful in monochrome designs because it allows you to create a range of shades using a single color channel.
/* CSS Snippet */
img {
filter: grayscale(0);
mix-blend-mode: multiply;
}