start learning
Image 1
21010788

Multiply blend mode

In CSS blend modes, the "multiply" blend mode is a type of blending that multiplies the colors of the top element with the colors of the underlying elements. This results in a darker color that is a combination of the top element's colors and the background's colors. The "multiply" blend mode is particularly useful for creating effects that mimic shadowing, shading, and darkening.

Here's a simplified explanation of how the "multiply" blend mode works:

  1. The color values of the top element and the underlying element are multiplied for each corresponding channel (red, green, and blue).
  2. The resulting color is a darker version of the original colors, with areas that are lighter in either element becoming darker in the result.

Here's an example of how the "multiply" blend mode can be used in CSS:


.multiply-blend-example {
    background-color: blue; /* Background color of the container */
    mix-blend-mode: multiply; /* Applying the multiply blend mode */
}

In this example, the element with the class multiply-blend-example would appear with a blue background color using the "multiply" blend mode. If this element overlaps with underlying content, the overlapping area would appear in a darker color where the colors of the top element and the background blend together.

The "multiply" blend mode is often used to create shading or darken images and elements, especially in situations where you want to simulate the effect of one element casting a shadow over another.

Here's another example of using the "multiply" blend mode in CSS, this time with an image:


.multiply-example {
    background-color: black; /* Background color of the container */
    mix-blend-mode: multiply; /* Applying the multiply blend mode */
    width: 400px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.multiply-example img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


<!DOCTYPE html>
<html>
<head>
    <title>Multiply Blend Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="multiply-example">
        <img src="image.jpg" alt="Example Image">
    </div>
</body>
</html>

In this example, assume you have an "image.jpg" file in the same directory as your HTML file. The above code creates a container with a black background and uses the "multiply" blend mode. The container contains an image that takes up the entire space of the container.

With the "multiply" blend mode applied, the image would appear with a darker, more blended look based on the underlying black background. The areas of the image that are lighter in color will blend more with the black background, resulting in a shadowed effect.
Remember that the "multiply" blend mode is just one of many available blend modes in CSS, each producing different visual effects when elements overlap.

×