Understanding CSS Mix Blend Mode Multiply Calculation

The CSS property mix-blend-mode: multiply allows elements to blend with their background using a mathematical multiplication of color channel values. This article explains the mathematical formula powering the multiply blend mode, details how color channels are processed, and explains why this calculation renders white backgrounds completely invisible while darkening non-white colors beneath them.

The Mathematical Formula

The multiply blend mode calculates color values on a per-channel basis (separately for Red, Green, and Blue). Before the calculation takes place, standard 8-bit RGB values (which range from 0 to 255) are normalized to a scale between 0.0 and 1.0:

\[\text{Normalized Value} = \frac{\text{Color Channel Value}}{255}\]

Once normalized, the formula multiplies the top layer's color (source) by the bottom layer's color (backdrop):

\[\text{Result} = \text{Source} \times \text{Backdrop}\]

To convert this back into a standard 8-bit RGB color for display, the result is multiplied back by 255:

\[\text{Final RGB Channel} = \frac{\text{Source Channel} \times \text{Backdrop Channel}}{255}\]

How White Backgrounds Disappear

The identity element of multiplication is 1. When you multiply any number by 1, the value remains unchanged (\(x \times 1 = x\)).

In digital color:

• Pure white has an RGB value of rgb(255, 255, 255).
• Normalized to the 0.0 to 1.0 scale, white equals \(1.0\) across all three channels (\(\frac{255}{255} = 1.0\)).

When an element with a white background is layered on top of another color using mix-blend-mode: multiply, the calculation evaluates as:

\[\text{Result} = 1.0 \times \text{Backdrop} = \text{Backdrop}\]

Because the backdrop color values are multiplied by 1, they remain 100% unaltered. As a result, pure white pixels become completely transparent, effectively removing white backgrounds from images, logos, and graphic assets without modifying the image file itself.

Why the Calculation Always Darkens

Because all color channels are normalized to values between 0.0 and 1.0, multiplying two non-white colors means multiplying two fractions smaller than 1.

Multiplying two positive numbers less than 1 always produces a smaller number:

\[0.5 \times 0.5 = 0.25\]

In RGB color spaces, lower numbers correspond to darker shades:

• 0.0 (rgb(0, 0, 0)) is pure black.
• 1.0 (rgb(255, 255, 255)) is pure white.

If you multiply a mid-tone gray (rgb(128, 128, 128) or \(\approx 0.5\)) with another mid-tone gray, the result is:

\[\frac{128 \times 128}{255} \approx 64 \text{ (a significantly darker gray)}\]

If any channel in either layer is pure black (0), the multiplication results in zero (\(0 \times x = 0\)), yielding pure black regardless of the other layer's color. Therefore, mix-blend-mode: multiply can only ever preserve the original brightness (when multiplying by white) or darken the image; it can never produce a color lighter than either of the two source inputs.