CSS Masking is a CSS module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements.

Reference

Properties

Specifications

Specification Status Comment
CSS Masking Module Level 1 Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'mask' in that specification.
Recommendation Initial definition

Browser compatibility

mask property

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Partial support 1
Notes
Partial support 1
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
IE No support NoOpera Partial support Partial
Notes
Partial support Partial
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari Partial support 4
Notes
Partial support 4
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
WebView Android Full support 2
Full support 2
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android ? Edge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support 3.2
Prefixed
Full support 3.2
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android ?
Applies to HTML elementsChrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge ? Firefox Full support 3.5IE No support NoOpera Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Shorthand for mask-* propertiesChrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge ? Firefox Full support 53IE No support NoOpera Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

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

Document Tags and Contributors

Contributors to this page: fscholz, mfluehr, teoli, chrisdavidmills, Sebastianz, jwhitlock
Last updated by: fscholz,