-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.

SummaryEdit

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 valueas each of the properties of the shorthand:
Applies toall elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

SyntaxEdit

/* 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

How to read CSS 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 ]?

ExamplesEdit

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

Browser compatibilityEdit

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

See alsoEdit

Document Tags and Contributors

 Last updated by: Sebastianz,