mix-blend-mode

The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property. For example:

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

See the Pen mix-blend-mode demo by CSS-Tricks (@css-tricks) on CodePen.

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.

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.

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

See the Pen mix-blend-mode by CSS-Tricks (@css-tricks) on CodePen.

Related properties

More information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
41+ 7.1 + * 35+ None None None 8.1+ *

* Safari and iOS Safari do not currently support the hue, saturation, color and luminosity values

Comments

  1. User Avatar
    Patrick D
    Permalink to comment#

    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!

    • User Avatar
      Robin Rendle
      Permalink to comment#

      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.

    • User Avatar
      Patrick D
      Permalink to comment#

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

    • User Avatar
      Ragdoll

      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.

    • User Avatar
      James
      Permalink to comment#

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

  2. User Avatar
    Steve
    Permalink to comment#

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

    • User Avatar
      Ragdoll
      Permalink to comment#

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

    • User Avatar
      Steve Chab
      Permalink to comment#

      Yeah, seems like support is still a little wonky.

  3. User Avatar
    Tomas M
    Permalink to comment#

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

  4. User Avatar
    Dikkie
    Permalink to comment#

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

  5. User Avatar
    Dickoless Cage
    Permalink to comment#

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

  6. User Avatar
    Scott Padgett
    Permalink to comment#

    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;
    }
    

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag