CSS mask-type property

Definition and Usage

mask-type The property specifies whether the SVG <mask> element is treated as a luminance mask or an alpha mask.

This property applies to the SVG <mask> element itself.

Example

View two SVG <mask> elements; one using mask-type: alpha, and the other using mask-type: luminance:

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  </defs>
    <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
    <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

Try It Yourself

CSS Syntax

mask-type: luminance|alpha|initial|inherit;

Property Value

Value Description
luminance Treats the mask image as a luminance mask. Default value.
alpha Treats the mask image as an alpha mask.
initial Sets this property to its default value. See: initial.
inherit Inherits this property from its parent element. See: inherit.

Technical Details

Default Value: luminance
Inheritance: No
Animation Production: Not supported. See:Animation-related Properties.
Version: CSS Masking Module Level 1
JavaScript Syntax: object.style.maskType="alpha"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
24 79 35 7 15

Related Pages

Tutorial:CSS Mask

Reference:CSS mask property

Reference:CSS mask-clip property

Reference:CSS mask-composite property

Reference:CSS mask-image property

Reference:CSS mask-mode property

Reference:CSS mask-origin property

Reference:CSS mask-position property

Reference:CSS mask-repeat property

Reference:CSS mask-size property