CSS - mask

The mask property in CSS allows users to alter the visibility of an item by either partially or fully hiding it. This is accomplished by either masking or clipping the image at specific points.

Example

CSS

Copy Code

.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}

Syntax

CSS

Copy Code

/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png);                       /* Pixel image used as mask */
mask: url(masks.svg#star);                 /* Element within SVG graphic used as mask */

/* Combined values */
mask: url(masks.svg#star) luminance;       /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px;       /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */
mask: url(masks.svg#star) 0 0/50px 50px;   /* Element within SVG graphic used as mask with a width and height of 50px */
mask: url(masks.svg#star) repeat-x;        /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */

/* Global values */
mask: inherit;
mask: initial;
mask: unset;

Values

<mask-reference>: Sets the mask image source. See mask-image.
<masking-mode>: Sets the masking mode of the mask image. See mask-mode.
<position>: Sets the position of the mask image. See mask-position.
<bg-size>: Sets the size of the mask image. See mask-size.
<repeat-style>: Sets the repetition of the mask image. See mask-repeat.
<geometry-box>: If only one <geometry-box> value is given, it sets both mask-origin and mask-clip. If two <geometry-box> values are present, then the first sets mask-origin and the second mask-clip.
<geometry-box> | no-clip: Sets the area, which is affected by the mask image. See mask-clip.
<compositing-operator>: Sets the compositing operation used on the current mask layer. See mask-composite.

Formal syntax

CSS

Copy Code

<a href="css/mask#mask-layer"><mask-layer></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><mask-layer> = <a href="css/mask#mask-reference"><mask-reference></a> <a href="css/mask#masking-mode"><masking-mode></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> / <a href="css/mask#bg-size"><bg-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#double_bar" title="Double bar">||</a> <a href="css/mask#repeat-style"><repeat-style></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/mask#geometry-box"><geometry-box></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/mask#geometry-box"><geometry-box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> no-clip <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/mask#compositing-operator"><compositing-operator></a></code></p><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#mask-source"><mask-source></a><br><masking-mode> = alpha <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> luminance <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> match-source<br><position> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <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#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#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <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#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#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <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#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#single_bar" title="Single bar">|</a>  <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <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#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> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> && <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single 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> <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> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><bg-size> = <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#single_bar" title="Single bar">|</a> auto <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>1,2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> cover <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> contain<br><repeat-style> = repeat-x <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> repeat-y <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> repeat <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> space <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> round <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> no-repeat <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>1,2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a><br><geometry-box> = <a href="css/mask#shape-box"><shape-box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> fill-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> stroke-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> view-box<br><compositing-operator> = add <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> subtract <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> intersect <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> exclude</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()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#image-set()"><image-set()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#element()"><element()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#cross-fade()"><cross-fade()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#gradient"><gradient></a><br><mask-source> = <a href="css/url" title=""><url></a><br><shape-box> = <a href="css/mask#box"><box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> margin-box</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-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#cf-mixing-image"><cf-mixing-image></a> , <a href="css/mask#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#linear-gradient()"><linear-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#repeating-linear-gradient()"><repeating-linear-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#radial-gradient()"><radial-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#repeating-radial-gradient()"><repeating-radial-gradient()></a><br><box> = border-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> padding-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> content-box</code></p><p>where <br><code><color> = <a href="css/mask#rgb()"><rgb()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#rgba()"><rgba()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#hsl()"><hsl()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/mask#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#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#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#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#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#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#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#ending-shape"><ending-shape></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/mask#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#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#ending-shape"><ending-shape></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/mask#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#color-stop-list"><color-stop-list></a> )</code></p><p>where <br><code><rgb()> = rgb( <a href="css/mask#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#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#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/mask#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a> )<br><hsla()> = hsla( <a href="css/mask#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/mask#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#color-stop"><color-stop></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2,}<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><br></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 property in CSS allows users to alter the visibility of an item by either partially or fully hiding it. This is accomplished by either masking or clipping the image at specific points.

The mask shorthand also resets mask-border to its initial value. It is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that mask-border has also been reset to allow the new styles to take effect.

Initial value	as each of the properties of the shorthand: `mask-origin`: `border-box` `mask-clip`: `border-box`
Applies to	all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements
Inherited	no
Percentages	as each of the properties of the shorthand: `mask-position`: refer to size of mask painting area minus size of mask layer image (see the text for `background-position`)
Media	visual
Computed value	as each of the properties of the shorthand: `mask-origin`: as specified `mask-clip`: as specified
Animatable	as each of the properties of the shorthand: `mask-position`: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers. `mask-size`: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	the unique non-ambiguous order defined by the formal grammar
Creates stacking context	yes

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (for SVG, only setting the mask image)	1.0-webkit^[1]	(Yes)^[2]	No support	(Yes)-webkit^[1]	4.0-webkit^[3]
Applies to HTML Elements	1.0-webkit^[1]	3.5 (1.9.1)^[1]	No support	(Yes)-webkit^[1]	No support
Shorthand for `mask-*` properties	1.0-webkit^[1]	No support^[4]	No support	(Yes)-webkit^[1]	No support

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support (for SVG, only setting the mask image)	2.1-webkit	?	?	?	3.2-webkit
Applies to HTML Elements	?	?	?	?	?
Shorthand for `mask-*` properties	?	?	?	?	?

[1] While the property itself is recognized, values applied to it don't have any effect. Though there is also a -webkit prefixed property, which can be used within SVG and HTML with a slightly different syntax (also allowing to set the non-standard -webkit-mask-attachment property).

[2] Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), the default color space when handling masks is sRGB; previously, the default (and only supported color space) was linearRGB. This changes the appearance of mask effects, but brings Gecko into compliance with the second edition of the SVG 1.1 specification.

[3] While the property itself is recognized, values applied to it don't have any effect. Though there is also a -webkit prefixed property, which can be used within SVG and HTML with a slightly different syntax (also allowing to set the non-standard -webkit-mask-attachment property).

[4] The shorthand version of the property is currently not implemented. See bug 1251161.

Specifications

Specification	Status	Comment
CSS Masking Level 1 The definition of 'mask' in that specification.	Candidate Recommendation	Extends its usage to HTML elements. Extends its syntax by making it a shorthand for the new `mask-*` properties defined in that specification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'mask' in that specification.	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

CSS CSS Masks CSS Property Layout NeedsBrowserCompatibility NeedsMobileBrowserCompatibility Reference SVG Web

CSS - mask

Example

Syntax

Values

Formal syntax

Description

Browser Compatibility

See Also

Specifications

License