Mix-blend-mode | CSS-Tricks

The mix-blend-mode property defines how an element’s content should blend with its background. For example, the text of a <h1> could blend with the background behind it in interesting ways.

.blend {
  mix-blend-mode: exclusion;
}

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 . 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 the 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.

The effect of these values are shown in the demo below:

More information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Firefox	IE	Edge	Safari
41	32	No	79	TP

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
126	127	126	18.0

Comments

Patrick D

# April 13, 2015

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!

Robin Rendle

Permalink to comment# April 13, 2015

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.
Patrick D

Permalink to comment# April 13, 2015

Thanks, Robin! I’ll post if I find anything out.
Ragdoll

Permalink to comment# May 10, 2015

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.
James

Permalink to comment# February 8, 2016

I’m having this same problem and can’t figure out a work-around…
Techtiger255 CodeMode

Permalink to comment# December 8, 2018

Mix-Background-Mode: ;
Should do your trick :D see it in action here:
Mozilla Developer Network
CSS Tricks

Steve

# July 16, 2015

Check out this very tasteful use of mix-blend-mode on Ableton’s website: https://loop.ableton.com/register/

Ragdoll

Permalink to comment# February 8, 2016

Looks neat, but causes a lot of scroll jank in Firefox. Performance is way down. It feels broken for just being text.
Steve Chab

Permalink to comment# February 8, 2016

Yeah, seems like support is still a little wonky.
Ben Van Looy

Permalink to comment# February 27, 2019

I needed the blend mode yesterday, but didn’t need it on the children of my container..

It was just for a header, so I made one layer with the blend mode and another absolute layer that had the same items positioned the same way as my relative layer.

Sure, not the cleanest solution, but it does the trick for now

Tomas M

# September 17, 2015

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).

HB

Permalink to comment# July 11, 2016

Hi Thomas, did you find any soultion to fix the issue?
Stuart

Permalink to comment# September 16, 2017

This still seems to be true today. Thanks for the comment.

Steve Chab

# February 8, 2016

I made this for my artist friend … pretty cool I think.
http://mattsusko.com

Dikkie

# April 14, 2016

Is safari updated to support the hue, saturation, color and luminosity values yet?

Matej

Permalink to comment# October 5, 2016

It appears not: http://caniuse.com/#search=mix-blend-mode

Dickoless Cage

# December 18, 2016

Thanks you. The little animation towards the bottom helped a lot. Nice little examples that drive the point home.

Scott Padgett

# January 20, 2017

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.

hero .color-container .icon-blockangle:before {
    position: absolute;
    font-size: 50vw;
    right: -3rem;
    top: -3rem;
mix-blend-mode: multiply;
color: #cc1f20;
}

Scott Padgett

Permalink to comment# January 23, 2017

You can see an example here -> http://www.perficient.com/services, inspect the red angle.

Merlin

# March 14, 2017

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

MaxArt

# November 24, 2017

The first example doesn’t work anymore in Chrome since v58. In order to make it work again you need to add a white background behind the image, so the perfect place would be here:

html {
  background-color: white;
}

Andrey Zadvornov

# November 9, 2018

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)

Geoff Graham

Permalink to comment# November 16, 2018

Hey Andrey! I wasn’t able to find any of those selectors on the page — maybe a screenshot of the element in devtools?

Andrey Zadvornov

# November 17, 2018

Actually thats are standart. I haven’t checked but they must be coz i’ve been applying css thru “inspect element first so it must be working

MSCAU

# March 5, 2019

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

thsmn

# October 28, 2019

Contrary to this article mix-blend-mode does not work in MS Edge (Version 44.18362, Win 10). Just tested it. Caniuse.com also lists it as not supported.

Geoff Graham

Permalink to comment# October 28, 2019

Hey there! The browser support data in this post is actually pulling directly from caniuse: https://caniuse.com/#feat=css-mixblendmode

What you’re seeing is probably the more updated result, which is the result of a recent partnership between caniuse and MDN: https://caniuse.com/#feat=mdn-css_properties_mix-blend-mode

Nice to know the data being pulled in isn’t the most recent — thanks!

Louise CW

# June 17, 2021

I have been looking at semantic html and was hoping to set the background on a tag. However, it doesn’t work, so I have to add a container div around the picture tag.
What’s the situation with elements that are also semantic html?

Gabriele

# August 4, 2021

I have tried several times. I can’t get mix-blend-mode to work. Can you please help me?

https://codepen.io/Girardini/full/WNpGWYN

qubenpeet

Permalink to comment# November 21, 2021

it has something to do with the grid layout.

if you change to block, and make the text overlap, it works.

like so https://codepen.io/qqqqqqq/pen/wvqZzvm