W3cubDocs

/CSS

CSS Masking

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 compatibilityUpdate compatibility data on GitHub

mask property

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1
1
While the property is recognized, values applied to it don't have any effect.
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
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.
 12 Yes
Yes
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.
 No Partial
Partial
While the property is recognized, values applied to it don't have any effect.
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
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.
 4
4
While the property is recognized, values applied to it don't have any effect.
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
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.
Applies to HTML elements Yes
Prefixed
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 ? 3.5 No Yes
Prefixed
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 No
Shorthand for mask-* properties Yes
Prefixed
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 ? 53 No Yes
Prefixed
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 2
2
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 ? Yes Yes ? 3.2
Prefixed
3.2
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 ?
Applies to HTML elements ? ? ? ? ? ? ?
Shorthand for mask-* properties ? ? ? 53 ? ? ?

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Masking