CSS - mask-image

The mask-image CSS property sets the image that is used as mask layer for an element.

Example

 

CSS Content

CSS
#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

HTML Content

HTML
<div id="masked"></div>

Syntax  

CSS
/* 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

CSS
<a href="css/mask-image#mask-reference"><mask-reference></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><mask-reference> = none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#mask-source"><mask-source></a></code></p><p>where <br><code><image> = <a href="css/url" title=""><url></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#image()"><image()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#image-set()"><image-set()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#element()"><element()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#cross-fade()"><cross-fade()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#gradient"><gradient></a><br><mask-source> = <a href="css/url" title=""><url></a></code></p><p>where <br><code><image()> = image( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/color_value" title=""><color></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a>! )<br><image-set()> = image-set( <a href="css/mask-image#image-set-option"><image-set-option></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a> )<br><element()> = element( <id-selector> )<br><cross-fade()> = cross-fade( <a href="css/mask-image#cf-mixing-image"><cf-mixing-image></a> , <a href="css/mask-image#cf-final-image"><cf-final-image></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><gradient> = <a href="css/mask-image#linear-gradient()"><linear-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#repeating-linear-gradient()"><repeating-linear-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#radial-gradient()"><radial-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#repeating-radial-gradient()"><repeating-radial-gradient()></a></code></p><p>where <br><code><color> = <a href="css/mask-image#rgb()"><rgb()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#rgba()"><rgba()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#hsl()"><hsl()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#hsla()"><hsla()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <hex-color> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#named-color"><named-color></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> currentcolor <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask-image#deprecated-system-color"><deprecated-system-color></a><br><image-set-option> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/resolution" title=""><resolution></a><br><cf-mixing-image> = <a href="css/percentage" title=""><percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> && <a href="css/image" title=""><image></a><br><cf-final-image> = <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/color_value" title=""><color></a><br><linear-gradient()> = linear-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> to <a href="css/mask-image#side-or-corner"><side-or-corner></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/mask-image#color-stop-list"><color-stop-list></a> )<br><repeating-linear-gradient()> = repeating-linear-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> to <a href="css/mask-image#side-or-corner"><side-or-corner></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/mask-image#color-stop-list"><color-stop-list></a> )<br><radial-gradient()> = radial-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/mask-image#ending-shape"><ending-shape></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/mask-image#size"><size></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/mask-image#color-stop-list"><color-stop-list></a> )<br><repeating-radial-gradient()> = repeating-radial-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/mask-image#ending-shape"><ending-shape></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/mask-image#size"><size></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/mask-image#color-stop-list"><color-stop-list></a> )</code></p><p>where <br><code><rgb()> = rgb( <a href="css/mask-image#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> )<br><rgba()> = rgba( <a href="css/mask-image#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> , <a href="css/mask-image#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/mask-image#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a> )<br><hsla()> = hsla( <a href="css/mask-image#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/mask-image#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ActiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> AppWorkspace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Background <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> CaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> GrayText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Highlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> HighlightText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoBackground <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Menu <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> MenuText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Scrollbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDDarkShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDLightShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Window <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowFrame <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowText<br><side-or-corner> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><color-stop-list> = <a href="css/mask-image#color-stop"><color-stop></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2,<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a><br><ending-shape> = circle <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ellipse<br><size> = closest-side <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> farthest-side <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> closest-corner <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> farthest-corner <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a></code></p><p>where <br><code><rgb-component> = <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a><br><alpha-value> = <a href="css/number" title=""><number></a><br><hue> = <a href="css/number" title=""><number></a><br><color-stop> = <a href="css/color_value" title=""><color></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a></code></p>

Description  

The mask-image CSS property sets the image that is used as mask layer for an element.

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inheritedno
Mediavisual
Computed valueas specified, but with URIs made absolute
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/mask-image

CSS CSS Masks CSS Property Experimental NeedsBrowserCompatibility NeedsMobileBrowserCompatibility Reference