CSS 'background-blend-mode' Property Explained

The CSS 'background-blend-mode' property specifies how an element's background images or colors blend with each other and with the element itself. It can dramatically alter the visual appearance of elements by blending multiple layers in various ways, creating effects such as color blending, texture overlays, and complex visual compositions directly with CSS.

See the Pen CSS 'background-blend-mode' by Webzstore (@webzstore) on CodePen.

Each blend mode creates a unique visual effect by altering how the background layers' colors interact. Experimenting with these modes can yield creative and visually appealing results for web designs.

Browser Support For 'background-blend-mode' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-blend-mode for the full compatibility details, including mobile browsers.

CSS Syntax of the 'background-blend-mode' Property

background-blend-mode: mode|initial|inherit;

Usage of the 'background-blend-mode' Property

This property is used when you wish to apply creative visual effects to the backgrounds of elements on a web page. It's particularly useful for designing engaging visuals without the need for additional image editing software, allowing for dynamic interactions between an element's background color and images.

Property Values of the 'background-blend-mode' Property

• Normal: No blending. The background is displayed as is.
• Multiply: Multiplies the background layers together, which results in darker areas and is useful for adding texture or depth.
• Screen: Makes all colors lighter, combining them to reflect a screen blend effect.
• Overlay: Combines multiply and screen blend modes depending on the base color, enhancing contrast.
• Darken: Keeps the darkest pixels of each layer only, darkening the overall background.
• Lighten: Keeps the lightest pixels of each layer only, lightening the overall background.
• Color-dodge: Brightens the base color to reflect the blend color, creating a lighter effect.
• Color-burn: Darkens the base color to mimic the blend color, creating a deeper effect.
• Hard-light: Acts like either multiply or screen depending on the blend color, adding sharp light effects.
• Soft-light: Creates a softer effect than hard-light, similar to a soft spotlight.
• Difference: Subtracts the bottom and top layers, offering high-contrast visuals.
• Exclusion: Similar to difference but with lower contrast, creating a subtle effect.
• Hue: Uses the blend layer's hue but the base layer's luminosity and saturation.
• Saturation: Uses the saturation of the blend layer but the hue and luminosity of the base layer.
• Color: Combines the hue and saturation of the blend layer with the luminosity of the base layer.
• Luminosity: Takes the luminosity of the blend layer and combines it with the hue and saturation of the base layer.
• Initial: Resets the property to its default value (normal).
• Inherit: Inherits the property from the element's parent.