mask-image

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

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

Syntax

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 definition

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Computed valueas specified, but with <url> values made absolute
Animation typediscrete

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()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<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>? )
<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

HTML

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

CSS

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

Result

Specifications

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mask-imageChrome Full support 1
Prefixed Notes
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes From version 8, Chrome added support for gradient values. Initially, Chrome supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Edge Full support 16Firefox Full support 53IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 4
Prefixed Notes
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Initially, Safari supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
WebView Android Full support 2
Prefixed Notes
Full support 2
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Initially, Android supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Chrome Android Full support 18
Prefixed Notes
Full support 18
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes From version 8, Chrome added support for gradient values. Initially, Chrome supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Firefox Android Full support 53Opera Android Full support 14
Prefixed
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 3.2
Prefixed Notes
Full support 3.2
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Initially, Safari supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Samsung Internet Android Full support 1.0
Prefixed
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Multiple mask imagesChrome Full support 1Edge Full support 18Firefox Full support 53IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 53Opera Android Full support 14Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
SVG masksChrome Full support 8Edge Full support 18Firefox Full support 53IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 53Opera Android Full support 14Safari iOS Full support 3.2Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.