CSS Reference Property

mask 6j345g

The mask property is a shorthand property for setting all mask properties. It accepts one or more comma-separated values, where each value corresponds to a mask layer: m6jy

mask: <mask-layer>#

Each layer specifies the mask-composite properties for that layer:

<mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||
    <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>

For each layer the shorthand first sets the corresponding layer of each property to that property’s initial value, then assigns any explicit values specified for this layer in the declaration.

In other words, the mask shorthand property assigns explicit given values and sets missing properties to their initial values. As a matter of fact, the mask shorthand also resets mask-border has also been reset to allow the new styles to take effect.

Hence, if you use the mask shorthand and only specify some of the mask properties and not all of them, then the other mask properties will be set to their initial values in the shorthand property.

Both the mask-origin take a <geometry-box> value; but what if only one box value is specified in the shorthand property?

If one <geometry-box> value is present then it sets both mask-clip.

The used value of the properties mask-image) references a <mask> element. In this case the element defines position, sizing and clipping of the mask layer image.

Official Syntax 4j1l4a

Syntax:

mask = <mask-layer>#

/* where */
<mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||
    <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>

Initial: The concatenation of the initial values of the individual properties
Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Animatable: Only the mask-position and mask-size properties are animatable

Values 4w6m73

<‘mask-reference’>: See mask-image entry for a list of possible values.
<‘masking-mode’>: See mask-mode entry for a list of possible values.
<‘position’>: See mask-position entry for a list of possible values.
<‘bg-size’>: See mask-size entry for a list of possible values.
<‘repeat-style’>: See mask-repeat entry for a list of possible values.
<‘geometry-box’>: See mask-clip entry for a list of possible values.
<‘compositing-operator’>: See mask-composite entry for a list of possible values.

Notes 5i3os

The values of the individual mask properties in the mask shorthand can be shuffled (reordered). Only requirement is that the mask-position property, and they must be separated with the ‘/’ character. You cannot specify the mask size in the shorthand property unless you also specify the mask position, otherwise the declaration is invalid.

Examples 3y6d6i

The following example applies a mask to an element using the mask shorthand property:

.element {
    mask: url(mask.png) luminance 50% 50% / contain no-repeat border-box;
}

The following example defines two mask layers to be used as a mask on an element using the mask shorthand property:

img {
    mask: url(my-mask.png) alpha center no-repeat exclude, linear-gradient(black, transparent);
}

Where the mask layer does not specify the longhand properties, they are set to their initial values.

Note that the value of the mask-composite property entry for more information.

The following example applies a mask to an element:

.el {
    mask: url(the-mask.png) alpha center center no-repeat;
}

The above shorthand is equivalent to:

.el {
    mask-image: url(the-mask.png);
    mask-mode: alpha;
    mask-position: center center;
    mask-size: auto;                /* initial value */
    mask-repeat: no-repeat;
    mask-origin: border-box;        /* initial value */
    mask-clip: border-box;          /* initial value */
    mask-composite: add;            /* initial value */
}

The mask declaration here also resets the mask-border property.

Live Demo 176n59

The following example applies a mask to an element using two mask layers.

Note that at the time of writing of this entry (June, 2014) the mask property does not work when a mask-composite property.

View this demo on the Codrops Playground

Browser s162l

CSS Masks 3o38a

Method of displaying part of an element, using a selected image as a mask

W3C Candidate Recommendation

ed from the following versions:

Desktop 1i5h4c

Mobile / Tablet 1u2r2g

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Notes 5i3os

This module, as you can see in the table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).

In the meantime, you can check out this open source feature table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.

Referencia de CSS3 2n6d4c

Official Syntax 4j1l4a

Values 4w6m73

Notes 5i3os

Examples 3y6d6i

Live Demo 176n59

Browser s162l

CSS Masks 3o38a

Desktop 1i5h4c

Mobile / Tablet 1u2r2g

Notes 5i3os

Further Reading g1037

Related Entries 351u6a