mask
====

The **`mask`** CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

**Note:** 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:

* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
Syntax
------


```css
/\* 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: revert;
mask: revert-layer;
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 both `mask-origin` and `mask-clip`. If two `<geometry-box>` values are present, then the first sets `mask-origin` and the second sets `mask-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:* `mask-image`: `none`
* `mask-mode`: `match-source`
* `mask-repeat`: `repeat`
* `mask-position`: `center`
* `mask-clip`: `border-box`
* `mask-origin`: `border-box`
* `mask-size`: `auto`
* `mask-composite`: `add`
 |
| 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:* `mask-position`: refer to size of mask painting area minus size of mask layer image (see the text for `background-position`)
 |
| Computed value | as each of the properties of the shorthand:* `mask-image`: as specified, but with `url()` values made absolute
* `mask-mode`: as specified
* `mask-repeat`: Consists of two keywords, one per dimension
* `mask-position`: Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
* `mask-clip`: as specified
* `mask-origin`: as specified
* `mask-size`: as specified, but with relative lengths converted into absolute lengths
* `mask-composite`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `mask-image`: discrete
* `mask-mode`: discrete
* `mask-repeat`: discrete
* `mask-position`: a repeatable list
* `mask-clip`: discrete
* `mask-origin`: discrete
* `mask-size`: a repeatable list
* `mask-composite`: discrete
 |
| Creates stacking context | yes |

Formal syntax
-------------
```

mask =   
  <mask-layer>#    
  
<mask-layer> =   
  <mask-reference>              ||  
  <position> [ / <bg-size> ]?   ||  
  <repeat-style>                ||  
  <geometry-box>                ||  
  [ <geometry-box> | no-clip ]  ||  
  <compositing-operator>        ||  
  <masking-mode>                  
  
<mask-reference> =   
  none           |  
  <image>        |  
  <mask-source>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ 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 [0,∞]> | 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-source    
  
<image> =   
  <url>       |  
  <gradient>    
  
<mask-source> =   
  <url>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
<shape-box> =   
  <visual-box>  |  
  margin-box      
  
<url> =   
  <url()>  |  
  <src()>    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Masking an image


```css
.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
```

Specifications
--------------

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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `clip-path`, `filter`
* CSS Shapes, clipping and masking – and how to use them
* Applying SVG effects to HTML content
* SVG