The mask
CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
As well as the properties listed below, the mask
shorthand also resets mask-border
to its initial value. It is therefore recommended to use the mask
shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that mask-border
has also been reset to allow the new styles to take effect.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Keyword values */ mask: none; /* Image values */ mask: url(mask.png); /* Pixel image used as mask */ mask: url(masks.svg#star); /* Element within SVG graphic used as mask */ /* Combined values */ mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */ mask: url(masks.svg#star) 40px 20px; /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */ mask: url(masks.svg#star) 0 0/50px 50px; /* Element within SVG graphic used as mask with a width and height of 50px */ mask: url(masks.svg#star) repeat-x; /* Element within SVG graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */ mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */ /* Global values */ mask: inherit; mask: initial; mask: unset; /* Multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y, /* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px */
Values
<mask-reference>
- Sets the mask image source. See
mask-image
. <masking-mode>
- Sets the masking mode of the mask image. See
mask-mode
. <position>
- Sets the position of the mask image. See
mask-position
. <bg-size>
- Sets the size of the mask image. See
mask-size
. <repeat-style>
- Sets the repetition of the mask image. See
mask-repeat
. <geometry-box>
- If only one
<geometry-box>
value is given, it sets bothmask-origin
andmask-clip
. If two<geometry-box>
values are present, then the first setsmask-origin
and the second setsmask-clip
. <geometry-box> | no-clip
- Sets the area that is affected by the mask image. See
mask-clip
. <compositing-operator>
- Sets the compositing operation used on the current mask layer. See
mask-composite
.
Formal definition
Initial value |
as each of the properties of the shorthand:
|
Applies to | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
|
Inherited | no |
Percentages |
as each of the properties of the shorthand:
|
Computed value |
as each of the properties of the shorthand:
|
Animation type |
as each of the properties of the shorthand:
|
Creates stacking context | yes |
Formal syntax
<mask-layer>#where <mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>where <mask-reference> = none | <image> | <mask-source><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> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <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()><box> = border-box | padding-box | content-boxwhere <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}<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><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
Masking an image
.target {
mask: url(#c1) luminance;
}
.anothertarget {
mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1The definition of 'mask' in that specification. | Candidate Recommendation | Extends its usage to HTML elements.
Extends its syntax by making it a shorthand for the new |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'mask' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mask
|
Chrome Partial support 1 Partial support 1 Notes' While the property is recognized, values applied to it don't have any effect. Full support 1 Prefixed' Implemented with 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 |
Edge
Full support 12 |
Firefox Full support 2 Full support 2 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 No |
Opera Partial support 15 Partial support 15 Notes' While the property is recognized, values applied to it don't have any effect. Full support 15 Prefixed' Implemented with 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 |
Safari Partial support 3.2 Partial support 3.2 Notes' While the property is recognized, values applied to it don't have any effect. Full support 3.2 Prefixed' Implemented with 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 |
WebView Android Partial support 2 Partial support 2 Notes' While the property is recognized, values applied to it don't have any effect. Full support 2 Prefixed' Implemented with 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 |
Chrome Android Partial support 18 Partial support 18 Notes' While the property is recognized, values applied to it don't have any effect. Full support 18 Prefixed' Implemented with 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 |
Firefox Android Full support 4 Full support 4 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. |
Opera Android Partial support 14 Partial support 14 Notes' While the property is recognized, values applied to it don't have any effect. Full support 14 Prefixed' Implemented with 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 |
Safari iOS Partial support 3.2 Partial support 3.2 Notes' While the property is recognized, values applied to it don't have any effect. Full support 3.2 Prefixed' Implemented with 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 |
Samsung Internet Android Partial support 1.0 Partial support 1.0 Notes' While the property is recognized, values applied to it don't have any effect. Full support 1.0 Prefixed' Implemented with 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 |
Legend
- Full support
- Full support
- Partial support
- Partial 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.
See also
clip-path
,filter
- CSS Shapes, clipping and masking – and how to use them
- Applying SVG effects to HTML content
- SVG
mask by Mozilla Contributors is licensed under CC-BY-SA 2.5.