mask-image

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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.

Syntax

css
/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image> values */
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue),
  linear-gradient(rgb(0 0 0 / 100%), transparent);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
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.

Note: Only the image sources served over HTTP and HTTPS protocols are accepted due to the CORS policy. Images served locally, including relative or absolute file:// protocols, are not accepted. To test URL image sources locally, set up a local server.

<image>

An image value used as a mask image layer.

In the following cases, the mask is counted as a transparent black image layer:

  • the mask image is empty (zero width or zero height)
  • the mask image fails to download
  • the mask image format is not supported by the browser
  • the mask image doesn't exist
  • the mask value doesn't point to a mask image

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-image = 
<mask-reference>#

<mask-reference> =
none |
<image> |
<mask-source>

<image> =
<url> |
<gradient>

<mask-source> =
<url>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Examples

Setting a mask image with a URL and a gradient

html
<div class="masked"></div>
css
.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;

  background: red;
  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg),
    radial-gradient(transparent 50%, black);
}

Specifications

Specification
CSS Masking Module Level 1
# the-mask-image

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-image
Multiple mask images
SVG masks

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also