This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

mask-image

Summary

This property sets the mask image or the mask source of an element.

Overview table

Initial value
none
Applies to
All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements.
Inherited
No
Media
visual
Computed value
As specified, but with URIs made absolute.
Animatable
No

CSS Object Model Property
:

Percentages
N/A

Syntax

  • mask-image: <child-selector>
  • mask-image: <image>
  • mask-image: <url>
  • mask-image: child
  • mask-image: none

Values

none
Counts as an image layer but does not mask the element.
<image>
A CSS image.
<url>
A URL reference to a <mask> element, e.g., url(commonmasks.svg#mask), or to a CSS image.
child
A keyword indicating that the last direct child <mask> element of the element the mask-image property is applied to should be used as the mask source. It is equivalent to select(mask:last-of-type).
<child-selector>
A functional notation accepting a comma-separated list of compound selectors that represents the first matching child <mask> element in DOM tree order.

Examples

/* CSS gradient */
body { mask-image: linear-gradient(black 0%, transparent 100%) }

/* none */
p { mask-image: none }

/* URL */
div { mask-image: url(dot-mask.png) }

Related specifications

CSS Masking Level 1
W3C Editor’s Draft