CSS - mask Property

CSSmaskproperty masks and displays an image at a particular position to partially or completely hide an element. The property is a shorthand for the CSS properties:mask-clip,mask-composite,mask-image,mask-mode,mask-origin,mask-position,mask-repeatandmask-size

Syntax

mask: <mask-image> <mask-mode> <mask-composite> <mask-clip> <mask-origin> <mask-position> <mask-repeat> <mask-size> | initial | inherit;

Property Values

ValueDescriptionmask-imageIt specifies an image for the mask layer for an element. Default value is none.mask-modeIt specifies whether the mask layer image should be luminance mask or alpha mask. Default value is match-source.mask-compositeIt specifies a compositing operation used on the current mask layer with the below mask layers. Default value is add.mask-clipIt specifies the area affected by a mask image. Default value is border-box.mask-originIt specifies the origin position of a mask layer image. Default value is border- box.mask-positionIt sets the starting position of a mask image relative to the mask position area. Default value is 0% 0%.mask-repeatIt specifies how a mask image will be repeated. Default value is repeat.mask-sizeIt specifies the size of the mask layer image. Default value is auto.initialIt sets the property to its default value.inheritIt inherits the property from the parent element.

Examples of CSS Mask Property

The following examples explain themaskproperty with different values.

Defining Multiple Values using Mask Property

Themaskproperty is a shorthand property for eight properties. Some of the properties are optional and may not be needed. In the following example five properties’ values have been defined namely:mask-image,mask-mode,mask-repeat,mask-positionandmask-size.

Example

Constiutent Properties of Mask Property

Themaskproperty is a shorthand property for eight properties. These eight properties can be used individually to produce the same effect produced by themaskproeprty. Some properties have been used individually in the following example to show the same effect as in the above example.

Example

Mask Property with Gradients

Themaskproperty can be used withgradients, to produce visual effects. In the following examplelinear-gradientandradial-gradienthave been used.

Example

Supported Browsers

css_reference.htm