-webkit-mask

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Summary

The -webkit-mask property is a shorthand property for setting individual mask property values in a single place in the style sheet. -webkit-mask can be used to set the values for one or more of: -webkit-mask-image, -webkit-mask-repeat, -webkit-mask-attachment, -webkit-mask-position, -webkit-mask-origin, and -webkit-mask-clip.

Initial value	as each of the properties of the shorthand: `-webkit-mask-image`: `none` `-webkit-mask-repeat`: `repeat` `-webkit-mask-attachment`: `scroll` `-webkit-mask-position`: `0% 0%` `-webkit-mask-origin`: `padding` `-webkit-mask-clip`: `border`
Applies to	all elements
Inherited	no
Media	visual
Computed value	as each of the properties of the shorthand: `-webkit-mask-image`: absolute URI or `none` `-webkit-mask-repeat`: as specified `-webkit-mask-attachment`: as specified `-webkit-mask-position`: for `<length>` the absolute value, otherwise a percentage `-webkit-mask-origin`: as specified `-webkit-mask-clip`: as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
-webkit-mask: none;

/* Image values */
-webkit-mask: url(mask.png);                       /* Pixel image used as mask */
-webkit-mask: url(masks.svg#star);                 /* Element within SVG graphic used as mask */
-webkit-mask: linear-gradient(transparent, black); /* Gradient used as mask */

/* Combined values */
-webkit-mask: url(masks.svg#star) 40px 20px;       /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */
-webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Element within SVG graphic used as mask with a width and height of 50px */
-webkit-mask: url(masks.svg#star) repeat-x;        /* Element within SVG graphic used as horizontally repeated mask */
-webkit-mask: url(masks.svg#star) border;          /* Element within SVG graphic used as mask extending to the box enclosed by the border */
-webkit-mask: url(masks.svg#star) text;            /* Element within SVG graphic used as mask clipping to the contained text */

/* Global values */
-webkit-mask: inherit;
-webkit-mask: initial;
-webkit-mask: unset;

Values

mask-image: Required. See -webkit-mask-image.
mask-repeat: Optional. See -webkit-mask-repeat.
mask-attachment: Optional. See -webkit-mask-attachment.
mask-position: Optional. See -webkit-mask-position.
mask-origin: Optional. See -webkit-mask-origin.
mask-clip: Optional. See -webkit-mask-clip.

Formal syntax

<mask-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip>]*where 
<mask-position> = [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top  | center | bottom ]?

Examples

.example {
  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
}

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	Not supported	Not supported	Not supported	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1	Not supported	Not supported	Not supported	3.2