Your Search Results


    The CSS mask-type properties defines if a SVG <mask> element is a luminance or an alpha mask.


    mask-type: luminance | alpha


    Is a keyword indicating that the associated <mask> is a luminance mask, that is that its relative luminance values must be used when applying it.
    Is a keyword indicating that the associated <mask> is an alpha mask, that is that its alpha channel values must be used when applying it.


    Let's apply the following rectangle as a mask:

    <rect x="10" y="10" width="80" height="80" fill="red" fill-opacity="0.7" />
    which leads to the following square:

    to this box:

    The result, if your browser supports the property, with different value of mask-type applied to the <mask> element are these two different squares:

    mask-type: alpha; mask-type: luminance;


    Specification Status Comment
    CSS Masking Level 1
    The definition of 'mask-type' in that specification.
    Candidate Recommendation Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 24.0 35.0 (35.0) [1] Not supported 15.0 7
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? 35.0 (35.0) [1] Not supported 15.0 Not supported

    [1] Available since Gecko 20, but behind the preference layout.css.masking.enabled, disabled by default.

    See also

    • Other mask-related properties: mask

    Document Tags and Contributors

    Contributors to this page: teoli, Sebastianz, Heycam, kscarfone, krit
    Last updated by: Sebastianz,