mix-blend-mode: Browser Support, Values, Limitations

What is mix-blend-mode?

mix-blend-mode is a CSS property in the W3C Compositing and Blending Module Level 1. It tells the browser how an element's colors mix with the layers behind it, using the same compositing math image editors like Photoshop apply. The property accepts 16 standard blend modes plus the newer plus-darker and plus-lighter operators.

Which browsers does mix-blend-mode support?

mix-blend-mode supports every modern evergreen browser, but Internet Explorer and Opera Mini never shipped it, and older Safari versions still ship partial support for the non-separable modes.

What blend mode values does mix-blend-mode support?

mix-blend-mode accepts 16 blend modes from the Compositing and Blending Module Level 1, plus two additional operators in Level 2. The Level 1 modes split into separable and non-separable groups, mirroring the math used in Photoshop and PDF.

• normal: The default value. The element paints over the layers behind it without blending.
• multiply: Multiplies pixel values, producing a darker result. Common for shadow and ink effects.
• screen: Inverts, multiplies, and inverts again, producing a lighter result. Common for glow and light leaks.
• overlay: Multiplies dark pixels and screens light pixels, lifting contrast.
• darken: Keeps the darker of the two pixel values per channel.
• lighten: Keeps the lighter of the two pixel values per channel.
• color-dodge: Brightens the backdrop to reflect the source. Useful for highlight blooms.
• color-burn: Darkens the backdrop to reflect the source. Useful for shadow tints.
• hard-light: Multiplies or screens depending on the source. Strong contrast.
• soft-light: A softer version of overlay. Subtle contrast and tone shifts.
• difference: Subtracts the darker pixel from the lighter one. Useful for invert effects on hover.
• exclusion: A lower-contrast variant of difference.
• hue: Non-separable. Takes the hue of the source and the saturation and luminosity of the backdrop.
• saturation: Non-separable. Takes the saturation of the source and the hue and luminosity of the backdrop.
• color: Non-separable. Takes the hue and saturation of the source, common for tinting black-and-white photos.
• luminosity: Non-separable. Takes the luminosity of the source. The inverse of color.
• plus-darker: Level 2 only. Adds source and backdrop, then clips. Useful for additive shadow stacks.
• plus-lighter: Level 2 only. Adds source and backdrop without clipping. Recommended for opacity cross-fades to avoid mid-fade flicker.

What are the use cases of mix-blend-mode?

mix-blend-mode lets designers ship Photoshop-style effects in CSS without exporting a flat image. The patterns below are the ones production sites reach for most often.

• Text over hero images: Apply mix-blend-mode: difference or mix-blend-mode: overlay to a heading so the text reads on dark and light areas of a photo.
• Hover and cursor effects: A circular cursor element with mix-blend-mode: difference flips its color when it passes over text or images, a common pattern on portfolio sites.
• Color grading product shots: mix-blend-mode: color tints a black-and-white product image to match the brand palette without a server-side image pipeline.
• Cross-fade animations: plus-lighter blends two layered images during an opacity cross-fade so the mid-frame does not flash darker.
• Watermarks and badges: Multiply or overlay drops a logo into a hero photo while preserving texture underneath.
• SVG illustrations: mix-blend-mode applies to SVG container elements, useful for stacking translucent shapes in icons and data-visualization legends.
• Image masking on the cheap: Pairing mix-blend-mode: screen or multiply with a solid background reproduces simple knockout effects without an SVG mask.

What are the known issues with mix-blend-mode?

mix-blend-mode is widely available, but several real-world bugs trip up production pages. The list below reflects what QA teams hit most often when blends look wrong on a sibling browser.

• Safari partial support on non-separable modes: hue, saturation, color, and luminosity sometimes render with slightly different chroma in Safari compared with Chrome or Firefox. Snapshot-test these modes on macOS and iOS Safari, not just Chrome.
• Stacking context interference: An ancestor that creates its own stacking context (z-index on a positioned element, opacity less than 1, transform, filter, will-change) cuts the blend off at that ancestor. The blend then mixes with the ancestor instead of reaching the body or hero behind it.
• Missing isolation on the parent: Without isolation: isolate on the parent, the blend reaches all the way down to the body background, which usually is not what the designer wanted. Wrap the blended element in a container and isolate it.
• Chromium issue 711955: Chrome 58 and later have a longstanding issue where mix-blend-mode does not render on elements stacked on a transparent background. Adding a solid background color to the parent or to a sibling fixes it.
• WebKit regression on Safari 26 and iOS 26: A regression in WebKit broke mix-blend-mode combined with the filter property inside picture-elements in WKWebView. Apple acknowledged the fix in Safari 26 release notes, but older patch builds still hit the bug.
• Not animatable: The mix-blend-mode property cannot be CSS-animated or transitioned. Toggle a class on the element instead and let opacity or transform carry the visual transition.
• Internet Explorer fallback gap: IE 11 ignores the property entirely, so any text-over-image hero needs a static fallback image or a feature query.

A short fix for the isolation bug:

.blended-hero {
  isolation: isolate;
}

.blended-hero img {
  mix-blend-mode: multiply;
}

In my experience, even after isolation: isolate fixes the obvious stacking-context bugs, the non-separable modes (color and luminosity especially) still ship slightly different chroma across Safari versions on macOS and iOS, so put a visual snapshot test on every blended hero element if your design depends on the exact pixel output.

Citations

All mix-blend-mode version numbers, blend mode definitions, and behavior notes in this guide come from these primary sources:

• MDN Web Docs, mix-blend-mode: developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
• MDN Web Docs, background-blend-mode: developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
• MDN Web Docs, isolation: developer.mozilla.org/en-US/docs/Web/CSS/isolation
• MDN Glossary, Stacking context: developer.mozilla.org/en-US/docs/Glossary/Stacking_context
• W3C Compositing and Blending Module Level 1: w3.org/TR/compositing-1
• W3C Compositing and Blending Module Level 2 (Editor's Draft): drafts.csswg.org/compositing-2
• CSS-Tricks Almanac, mix-blend-mode: css-tricks.com/almanac/properties/m/mix-blend-mode
• Wikipedia, Blend modes: en.wikipedia.org/wiki/Blend_modes