In the example above the content has been modified by the mix-blend-mode so that the colors of the text are excluded from its background. This is just one of many values for this property.

There is an issue with Chrome 58+ where mix-blend-mode will not render on elements that are set on a transparent <body>. The has been ticketed as Issue 711955 in Chrome, which is assigned at the time of this writing. In the meantime, a simple fix is to assign a white (or really, any) background color to the body element.

Values

initial: the default setting of the property that does not set a blend mode.

inherit: an element will inherit the blend mode from its parent element.

unset: removes the current blend mode from an element.

<blend-mode>: this is the attribute of one of the blend modes beneath:

normal: this attribute applies no blending whatsoever.

multiply: the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.

screen: multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color.

overlay: multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode.

darken: the background is replaced with the content where the content is darker, otherwise it is left as it was.

lighten: the background is replaced with the content where the content is lighter.

color-dodge: this attribute brightens the background color to reflect the color of the content.

color-burn: this darkens the background to reflect the content’s natural color.

hard-light: depending on the color of the content this attribute will screen or multiply it.

soft-light: depending on the color of the content this will darken or lighten it.

difference: this subtracts the darker of the two colors from the lightest color.

exclusion: similar to difference but with lower contrast.

hue: creates a color with the hue of the content combined with the saturation and luminosity of the background.

saturation: creates a color with saturation of the content combined with the hue and luminosity of the background.

color: creates a color with the hue and saturation of the content and the luminosity of the background.

luminosity: creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute.

It’s worth noting that setting a blend mode other than normal will generate a new stacking context which must then be blended with the stacking context that contains the element.

Desktop

Mobile / Tablet

Comments

So I’m guessing this is insurmountable, like inherited opacity, but has anyone found a way to apply a mix-blend-mode to a container, then NOT apply the effect to it’s children? (for ex. mix-blending a div’s colored background to multiply the content beneath while keeping the text within the div opaque). I’ve been fiddling with mix-blend-mode: unset; for the child elements but no luck yet.

I’m thinking there’s no way to selectively blend a div’s children, but this is new and un-researched enough that I figured it was worth a shot. Thanks!

Ah I did take a look at that for the demos but couldn’t figure out a way to do stop child elements inheriting the styles of the parent. The documentation out there is really lacking at the moment unfortunately.

The new “isolation” property doesn’t exactly solve your problem, but it could potentially help in sorting out some blending mode issues. Truthfully, I haven’t found a practical need for it yet, but my own experiments are pretty light-weight thus far.

Just thought I’d share to spread the word and see if others can figure it out. I totally agree that we need a way to separate child nodes from containers before applying blending to those containers.

Beware, that using mix-blend-mode may break your CSS transitions, like smooth opacity, because if any child element has mix-blend-mode style, the opacity is not animated smoothly on GPU (at least as of today on Chrome, for ‘difference’ blend mode).

I found a way. So in order to apply blend-modes (not background-blend-modes) to elements, you need to make that element a FONT-ICON – because fonts are open to blend-modes (rather then background-blend-modes).

Our designers have a design that called for color overlays to ontop of our images. But the image needs to be an IMG and not a background-image.

So what I did, was took the shape the designers came up with (this being an angled block) and recreated that block in Illustrator as a SVG. Then compiled it into a Font-Icon, then applied that icon to the :before attribute.

Depending on positioning needs, how about creating a separate div for your background (inside the container) and giving that your mix-blend-mode properties / effects and then continuing as per usual with your container elements? Example: https://codepen.io/Merlin007/pen/wJqEaZ

I try to implement it in here – bfmos.ru
It’s on WordPress, Enfold.
The thing that i try to change – is a small bar
with a phone number on the very top
The exmple of code i use is
#top .av_header_transparency #header_meta {
background: rgba(255,255,255,1);
mix-blend-mode: difference;
}

And the main question is – why mix-blend-mode
works on some elements, and doesn’t on others?
I think cssTricks gotta post such article)
(or i think i’ll google the same in the next minute)
Help please, i put a tick into Send Me Email to Notify me)

I am disappointed to note that an image doesn’t blend with the page background at all. So if you have a red background on your BODY tag, and a photo in the page with a mix-blend-mode, the photo isn’t blended with the background. You need to put a red wrapper DIV around the image to see the blend: https://codepen.io/MSCAU/pen/ywarGV

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.