<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">mask</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/ Image values /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>mask.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ Pixel image used as mask /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic used as mask /</span> <span class="token comment">/ Combined values /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span> luminance<span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic used as luminance mask /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span> 40px 20px<span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic used as mask positioned 40px from the top and 20px from the left /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span> 0 0/50px 50px<span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic used as mask with a width and height of 50px /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span> repeat-x<span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic used as horizontally repeated mask /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span> stroke-box<span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic used as mask extending to the box enclosed by the stroke /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span> exclude<span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic used as mask and combined with background using non-overlapping parts /</span> <span class="token comment">/ Global values /</span> <span class="token property">mask</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">mask</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">mask</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">mask</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> <span class="token comment">/ Multiple masks /</span> <span class="token property">mask</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#star<span class="token punctuation">)</span></span> left / 16px repeat-y<span class="token punctuation">,</span> <span class="token comment">/ Element within SVG graphic is used as a mask on the left-hand side with a width of 16px /</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#circle<span class="token punctuation">)</span></span> right / 16px repeat-y<span class="token punctuation">;</span> <span class="token comment">/ Element within SVG graphic is used as a mask on the right-hand side with a width of 16px /</span> </code></pre>

mask

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

Note: As well as the properties listed below, 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.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* 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: revert; mask: unset;  /* Multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y,    /* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px */       url(masks.svg#circle) right / 16px repeat-y; /* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px */ 

Values

Sets the mask image source. See mask-image.

Sets the masking mode of the mask image. See mask-mode.

Sets the position of the mask image. See mask-position.

Sets the size of the mask image. See mask-size.

Sets the repetition of the mask image. See mask-repeat.

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 sets mask-clip.

Sets the area that is affected by the mask image. See mask-clip.

Sets the compositing operation used on the current mask layer. See mask-composite.

Formal definition

Formal syntax

<mask-layer>#
where <mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>
where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-source
where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-box
where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><box> = border-box | padding-box | content-box
where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] [ <resolution> || type(<string>) ]<id-selector> = <hash-token><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> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )<side-or-corner> = [ left | right ] || [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>
where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage>

Examples

Masking an image

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

Specifications

See also