CSS background-blend-mode Property

This property determines how an element's background images and background color blend together.

selector { background-blend-mode: value; }
normal The default setting where no blending occurs and the top layer covers the bottom.
multiply Multiplies the background layers, resulting in a darker color than either original.
screen Inverts, multiplies, and inverts the layers again, resulting in a lighter color.
overlay Multiplies or screens depending on the base color, preserving highlights and shadows.
darken Compares layers and keeps the darkest pixels from each.
lighten Compares layers and keeps the lightest pixels from each.
color-dodge Brightens the background color to reflect the top layer.
color-burn Darkens the background color to reflect the top layer.
hard-light Multiplies or screens the colors depending on the top layer color.
soft-light Darkens or lightens the colors depending on the top layer color, resembling a diffused spotlight.
difference Subtracts the darker color from the lighter color to create a high-contrast result.
exclusion Similar to difference but with lower contrast.
hue Combines the hue of the top layer with the saturation and luminosity of the bottom layer.
saturation Combines the saturation of the top layer with the hue and luminosity of the bottom layer.
color Combines the hue and saturation of the top layer with the luminosity of the bottom layer.
luminosity Combines the luminosity of the top layer with the hue and saturation of the bottom layer.

Code Examples

A basic example blending a red background color with a background image using the multiply mode.

<div style="width: 300px; height: 300px; background-color: #ff0000; background-image: url('https://www.adamkhoury.com/images/adam_khoury.jpg'); background-size: cover; background-blend-mode: multiply;"></div>

An advanced example using a dropdown and JavaScript to dynamically change the blend mode of a hero section.

<div id="hero" style="width: 100%; height: 400px; background: url('https://www.adamkhoury.com/images/adam_khoury.jpg') no-repeat center / cover, #0066ff; background-blend-mode: overlay;">
  <select onchange="document.getElementById('hero').style.backgroundBlendMode = this.value;">
    <option value="overlay">Overlay</option>
    <option value="screen">Screen</option>
    <option value="multiply">Multiply</option>
    <option value="luminosity">Luminosity</option>
  </select>
</div>

Pro Tip

You can use this property to create complex textures and lighting effects without ever opening Photoshop. By layering a simple noise texture over a solid color using the multiply or overlay mode, you can give your UI a gritty, organic feel while keeping your file sizes tiny and your code easy to maintain.

Deep Dive

Think of this property like a chemical reaction between layers of paint. When you apply multiple background images or a background color to a single element, they normally just stack on top of each other. By using background-blend-mode, you tell the browser to run a mathematical formula on the color values of those layers to produce a new visual result. It only affects the backgrounds of the specific element it is applied to, and does not blend the element with its parent or neighboring elements. If you have three background images, you can provide a comma-separated list of blend modes to control how each layer interacts with the ones beneath it.

Best Practices

Always define a background-color alongside your background-image when using blend modes. Since the blend mode needs a base to react with, the color acts as your canvas. This is also great for branding; you can take various photos and unify them by blending them with a specific corporate hex color, making them all look like they belong to the same set.

Common Pitfalls

A common mistake is confusing this with mix-blend-mode. Remember that background-blend-mode only blends the background layers of the element itself. If you want to blend the text inside the element with the background behind it, you need mix-blend-mode. Also, if your background image isn't loading or has a transparent alpha channel, the blend might look broken or produce unexpected flat colors.

Accessibility

Blending can significantly reduce the contrast between your background and any text sitting on top of it. Always check your color contrast ratios after applying a blend mode. A photo that was easy to read text over might become impossible to read once darkened or lightened through a blend.

Dev Data Table: background-blend-mode property

default normal
animatable no
inherited no
experimental no
year_intro 2013
year_standard 2014
js_syntax_1 element.style.backgroundBlendMode = "multiply";
js_syntax_2 element.style.setProperty("background-blend-mode", "multiply");
js_note Target the property using camelCase when working directly with the style object in JavaScript.
browsers { "Chrome": 35, "Edge": 79, "Firefox": 30, "Safari": 7.1, "Opera": 22, "Chrome Android": 35, "Safari on iOS": 8, "Samsung Internet": 3, "Opera Mobile": 22 }
results render here...