<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword value /</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/ &lt;mask-source&gt; value /</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>masks.svg#mask1<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ &lt;image&gt; values /</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 1.0<span class="token punctuation">)</span><span class="token punctuation">,</span> transparent<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> <span class="token function">image</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> skyblue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Multiple values /</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> <span class="token function">image</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> skyblue<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 1.0<span class="token punctuation">)</span><span class="token punctuation">,</span> transparent<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">mask-image</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

mask-image

The mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the mask-mode property.

/* 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: revert; mask-image: unset; 

Syntax

Values

This keyword is interpreted as an opaque white image layer.

A url() reference to a <mask> or to a CSS image.

An image value used as mask image layer.

Formal definition

Formal syntax

<mask-reference>#
where <mask-reference> = none | <image> | <mask-source>
where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url>
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()>
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}<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> ] ]<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><length-percentage> = <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

Setting a mask image with a URL

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors