mozilla
Your Search Results

    mix-blend-mode

    Summary

    The mix-blend-mode CSS property describes how an element content should blend with the content of the element that is below it and the element's background.

    Syntax

    Formal syntax:  <blend-mode>
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;
    
    mix-blend-mode: initial;
    mix-blend-mode: inherit;
    mix-blend-mode: unset;
    

    Values

    <blend-mode>
    Is a <blend-mode> denoting the blending mode that should be applied. There can be several values, separated by commas.

    Examples

    <svg>
      <circle cx="40" cy="40" r="40" fill="red"/>
      <circle cx="80" cy="40" r="40" fill="lightgreen"/>
      <circle cx="60" cy="80" r="40" fill="blue"/>
    </svg>
    circle { mix-blend-mode: screen; }

    Live result

    Specifications

    Specification Status Comment
    Compositing and blending Level 1
    The definition of 'mix-blend-mode' in that specification.
    Candidate Recommendation Initial specification.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support

    41.0

    32.0 (32.0) ? ? 8.0
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support

    41.0

    32.0 (32.0) ? ? 8.0

    See also

    Document Tags and Contributors

    Contributors to this page: ishita, FredB, kyleolsondesign, jpmedley, teoli, APerson241
    Last updated by: APerson241,