CSS Blend Modes

Blend modes control how the colors of an element combine with the colors of whatever is behind it. Instead of an element simply sitting on top of its background, a blend mode calculates a new color for each pixel based on a mathematical relationship between the two layers. The results range from subtle color interactions to dramatic artistic effects that would otherwise require image editing software.

CSS provides two properties for applying blend modes: mix-blend-mode, which blends an element with everything behind it in the stacking context, and background-blend-mode, which blends an element's background layers with each other. Both use the same set of blend mode values.

How Blend Modes Work

Every blend mode is a formula. It takes the color value of the element being blended (the source) and the color value of whatever is behind it (the backdrop), runs them through a calculation, and produces a result color. That result is what the browser renders.

The formulas operate on individual RGB channel values, treating them as numbers between 0 and 1. Some modes like multiply multiply the channels together, which always produces a darker result. Others like screen invert, multiply, then invert again, which always produces a lighter result. Understanding the general direction of each mode (does it darken, lighten, or add contrast?) is more useful day-to-day than memorizing the exact formulas.

mix-blend-mode

mix-blend-mode blends an element with everything behind it in the stacking context. It is applied directly to the element you want to blend.

        .overlay-text {
            mix-blend-mode: multiply;
        }

        .color-overlay {
            mix-blend-mode: screen;
        }
    

The most common use cases are text that blends into a background image, color overlays on photographs, and layered graphic elements that interact with each other visually rather than just sitting on top.

The Common Blend Modes

There are sixteen blend modes in CSS. Most projects use a handful of them regularly. Here are the ones worth knowing:

multiply multiplies the source and backdrop colors together. White disappears (multiplying by 1 changes nothing), black stays black (multiplying by 0 gives 0), and everything else darkens. Classic use: placing dark artwork over a colored background while removing the white paper.

screen is the inverse of multiply. Black disappears, white stays white, and everything else lightens. Classic use: placing glows, light leaks, or fire effects over a dark background while removing the black.

overlay combines multiply and screen: dark areas of the backdrop get multiplied (darker), light areas get screened (lighter). Contrast increases. Classic use: adding texture or color grading to a photograph.

color-dodge brightens the backdrop to reflect the source color, producing vivid, high-contrast results. color-burn does the opposite, darkening the backdrop. Both are dramatic and work well for stylized effects.

difference subtracts the darker color from the lighter one. Identical colors produce black, complements produce white. It creates a high-contrast, often psychedelic look. exclusion is a softer version of difference with lower contrast.

hue, saturation, color, and luminosity are the non-separable modes. They operate on HSL channels rather than RGB, letting you blend only the hue, only the saturation, the combined hue and saturation, or only the brightness of two layers. These are excellent for color grading and tinting effects where you want to change the color of an image without affecting its tonal structure.

Blend Mode Demo

The demo below applies different blend modes to a colored div layered over a photograph. Use the buttons to see how each mode changes the interaction between the two layers.

normal multiply screen overlay color-dodge difference hue color luminosity

mix-blend-mode: normal

Blend Modes on Text

Text is one of the most effective targets for blend modes. Applying mix-blend-mode: overlay or mix-blend-mode: multiply to large display text lets it interact with a background image, creating the impression that the text is part of the image rather than sitting on top of it.

        .hero-text {
            font-size: 8rem;
            font-weight: 900;
            color: white;
            mix-blend-mode: overlay;
        }
    

The color you choose for the text matters as much as the blend mode. White text with overlay brightens the image where the text sits. Black text with multiply darkens the image, burning the text into the photograph. Experimenting with both the color and the blend mode together produces the best results.

background-blend-mode

background-blend-mode blends the background layers of a single element with each other. When an element has multiple background images or a background image combined with a background color, background-blend-mode controls how those layers interact.

        .element {
            background-image: url('texture.jpg');
            background-color: #3b82f6;
            background-blend-mode: multiply;
        }
    

In this example, the texture image is multiplied with the blue background color, tinting the texture blue while preserving its tonal detail. Changing the background color changes the tint without touching the image. This is a powerful technique for theming: one grayscale texture or photograph becomes infinitely reusable by changing a single color value.

When multiple background images are stacked, a comma-separated list of blend modes corresponds positionally to each layer, the same way background-size and background-position work with multiple backgrounds.

        .element {
            background-image:
                linear-gradient(rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6)),
                url('photo.jpg');
            background-blend-mode: overlay, normal;
        }
    

background-blend-mode vs mix-blend-mode

The key distinction is scope. mix-blend-mode blends an element with everything behind it in the page, including other elements. background-blend-mode only blends within the element's own background layers and does not interact with anything outside the element. This makes background-blend-mode more contained and predictable: the blending effect is self-contained and will not accidentally interact with overlapping sibling elements.

isolation

When using mix-blend-mode, an element blends with everything behind it all the way down the stacking context. Sometimes you want blending to happen within a group of elements but not with elements outside that group. The isolation property creates a new stacking context that acts as a blending boundary.

        /* Elements inside .card blend with each other
           but not with anything outside .card */
        .card {
            isolation: isolate;
        }

        .card .overlay {
            mix-blend-mode: multiply;
        }
    

Without isolation: isolate on the parent, the multiply blend would reach through the card and interact with the page background or elements behind the card. With it, the blend stops at the card boundary. This is an important detail whenever blend modes are used inside components that need to remain visually self-contained.

Performance Considerations

Blend modes require the browser to composite layers together in a specific order, which has performance implications. A page with a small number of blend mode effects is fine. Problems emerge when blend modes are applied to large elements, animated elements, or many elements simultaneously.

The main concern is that elements with mix-blend-mode cannot always be promoted to their own GPU compositor layer, because the browser needs to know what is behind them to calculate the blend. This can force more of the rendering pipeline to run on the CPU, which is slower and can cause jank during scroll or animation.

In practice: use blend modes for static decorative effects and be cautious about animating them or applying them to elements that cover large portions of the viewport. If you need to animate a blended element, test on lower-end hardware before shipping.

Putting It Together

Blend modes open up a category of visual effect that is otherwise only achievable through pre-composited images. A color graded photograph, text burned into an image, a glowing neon overlay, a duotone effect achieved with a single color layer: all of these are single CSS properties applied to elements that remain fully editable, responsive, and themeable.

The workflow for using blend modes effectively is to start with the visual effect you want, identify whether it requires blending with external elements (mix-blend-mode) or only within the element's own background (background-blend-mode), choose a mode based on whether you want to darken, lighten, or add contrast, then adjust the source color to tune the intensity. Isolation and performance are things to check once the effect is working.