This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Summary
The mask-image CSS property sets the image that is used as mask layer for an element.
| Initial value | none |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified, but with URIs made absolute |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* Keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image< values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* Multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* Global values */ mask-image: inherit; mask-image: initial; mask-image: unset;
Values
none- This keyword is interpreted as a transparent black image layer.
<mask-source>- A
<url>reference to a<mask>or to a CSS image. <image>- An image value used as mask image layer.
Formal syntax
<mask-reference>#where
<mask-reference> = none | <image> | <mask-source>where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>
Example
CSS Content
#masked {
width: 100px;
height: 100px;
background-color: #8cffa0;
mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}
HTML Content
<div id="masked"></div>
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Level 1 The definition of 'mask-image' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0-webkit[1] | No support[2] | No support | ? | (Yes)-webkit | 4.0-webkit[3] |
| Multiple mask images | 1.0-webkit | No support[2] | No support | ? | (Yes)-webkit | 4.0-webkit |
| SVG masks | 8.0 | No support[2] | No support | ? | (Yes)-webkit | 4.0-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1-webkit[4] | No support[2] | ? | No support | 3.2-webkit[5] |
| Multiple mask images | (Yes)-webkit | No support[2] | ? | No support | (Yes)-webkit |
| SVG masks | (Yes)-webkit | No support[2] | ? | No support | (Yes)-webkit |
[1] Implemented in version 8.0, Chrome initially only supported the -webkit prefixed versions of gradients as values. Later, support for the unprefixed versions was added.
[2] This feature is not implemented yet. It is only available in Nightly and Dev Edition. See bug 1251161.
[3] Implemented in version 4.0, Safari initially only supported the -webkit prefixed versions of gradients as values.
[4] Android initially only supported the -webkit prefixed versions of gradients as values.
[5] iOS Safari initially only supported the -webkit prefixed versions of gradients as values.