CSS mix-blend-mode Property

This property determines how an element's content blends with the content of its parent and the elements behind it.

selector { mix-blend-mode: value; }
normal The default setting where no blending occurs and the element stays opaque.
multiply Multiplies the color of the element with the backdrop color, resulting in a darker appearance.
screen Inverts the colors, multiplies them, and inverts them again, resulting in a lighter appearance.
overlay Combines multiply and screen modes depending on the backdrop color.
darken Retains the darkest pixels between the element and the backdrop.
lighten Retains the lightest pixels between the element and the backdrop.
color-dodge Brightens the backdrop color to reflect the element color.
color-burn Darkens the backdrop color to reflect the element color.
hard-light Either multiplies or screens colors depending on the element color.
soft-light Either darkens or lightens colors depending on the element color, creating a softer effect.
difference Subtracts the darker of the two colors from the lighter one.
exclusion Produces an effect similar to difference but with lower contrast.
hue Creates a color with the hue of the element and the saturation and luminosity of the backdrop.
saturation Creates a color with the saturation of the element and the hue and luminosity of the backdrop.
color Creates a color with the hue and saturation of the element and the luminosity of the backdrop.
luminosity Creates a color with the luminosity of the element and the hue and saturation of the backdrop.

Code Examples

A basic example showing how a cyan heading blends with a red background using multiply to create a darker result.

<div style="background: #ff0000; padding: 50px;">
  <h2 style="color: #00ffff; mix-blend-mode: multiply; font-size: 48px; margin: 0;">MULTIPLY EFFECT</h2>
</div>

An advanced example using JavaScript and the difference mode to create an interactive 'X-ray' circle that inverts the color of the text it passes over.

<div id="box_ui" style="position: relative; width: 100%; height: 300px; background: #222222; overflow: hidden; display: flex; align-items: center; justify-content: center;">
  <div id="circle" style="position: absolute; width: 150px; height: 150px; background: #ffffff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none;"></div>
  <h2 style="color: #ffffff; font-size: 50px; user-select: none;">ADAM KHOURY</h2>
</div>
<script>
const box = document.getElementById("box_ui");
const circle = document.getElementById("circle");
box.addEventListener("mousemove", (e) => {
  const bounds = box.getBoundingClientRect();
  circle.style.left = (e.clientX - bounds.left - 75) + "px";
  circle.style.top = (e.clientY - bounds.top - 75) + "px";
});
</script>

Pro Tip

If you want to blend an element with its parent but prevent it from blending with the site's main body background, wrap the parent and the element in a container and set that container to isolation: isolate;. This creates a local sandwich where the blending stays contained.

Deep Dive

Think of your web page as a stack of transparency sheets used on an old overhead projector. By default, each sheet is solid and hides what is underneath. Setting a mix-blend-mode is like changing the chemical properties of the ink on that top sheet so it interacts with the ink on the sheets below. The browser takes the color values (RGB) of the top element and the colors of the backdrop, then runs a mathematical formula based on the mode you chose—like multiply or screen—to determine the final color shown on the screen. It is important to remember that this affects the entire element, including its text and borders, not just its background.

Best Practices

Use high-contrast backgrounds to make the blending effects pop. It is most effective when placing light text over dark images or vice versa. Always check your design on multiple screen types, as color rendering can vary between displays, potentially making your blended content harder to see on lower-quality panels.

Common Pitfalls

The most common issue is the Stacking Context. If an element or one of its parents creates a new stacking context via properties like opacity, transform, or isolation, the blending might not reach the background layers you intended. Also, remember that mix-blend-mode blends with the backdrop, while background-blend-mode blends an element's own background images and colors together.

Accessibility

Blending can severely impact text readability. If you use a blend mode on a text element, ensure the resulting contrast ratio still meets WCAG standards. Always test your site with color-blindness simulators to ensure the visual information remains clear when colors are merged.

Dev Data Table: mix-blend-mode property

default normal
animatable no
inherited no
experimental no
year_intro 2014
year_standard 2015
js_syntax_1 element.style.mixBlendMode = "multiply";
js_syntax_2 element.style.setProperty("mix-blend-mode", "screen");
js_note When manipulating this property in JavaScript, ensure the element has a backdrop to blend with, or the effect will not be visible.
browsers { "Chrome": 41, "Edge": 79, "Firefox": 32, "Safari": 8, "Opera": 28, "Chrome Android": 41, "Safari on iOS": 8, "Samsung Internet": 4, "Opera Mobile": 28 }
results render here...