CSS mask Property

❮ Previous Reference Next ❯


.example {
  -webkit-mask: url("hello-world.png") no-repeat;
  mask: url("hello-world.png") no-repeat;


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

Note: The mask shorthand also resets mask-border to its initial value.

The following properties are shorthand of mask property:

Default value:See individual
JavaScript syntax:

Standard Syntax

mask: mask-image|mask-mode|mask-position|mask-size|mask-repeat|[mask-clip|no-clip]|mask-composite|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
mask-image Sets the mask image source.
mask-mode Sets the masking mode of the mask image.
mask-position Sets the position of the mask image.
mask-size Sets the size of the mask image.
mask-repeat Sets the repetition of the mask image.
mask-clip 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.
no-clip Sets the area that is affected by the mask image. See mask-clip.
mask-composite Sets the compositing operation used on the current mask layer.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  mask: See individual value;
❮ Previous Reference Next ❯