CSS mask Property

❮ Previous Complete CSS Reference Next ❯

Example

Create a mask layer for an image:

.mask1 {
mask: url(w3logo.png) no-repeat 50% 50%;
}

More "Try it Yourself" examples below.

Definition and Usage

The mask property is used to hide an element (partially or fully) by masking or clipping the image at specific points:

The mask property is a shorthand property for the following:

Default value:	none match-source repeat 0% 0% border-box border-box auto add
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS Masking Module Level 1
JavaScript syntax:	object.style.mask="url(star.svg)"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
mask	120	120	53	15.4	106

CSS Syntax

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

Property Values

Value	Description
mask-image	Specifies an image to be used as a mask layer for an element. Default value is none
mask-mode	Specifies whether the mask layer image should be treated as a luminance mask or as an alpha mask. Default value is match-source
mask-repeat	Sets if/how a mask image will be repeated. Default value is repeat
mask-position	Sets the starting position of a mask image (relative to the mask position area). Default value is 0% 0%
mask-clip	Specifies which area is affected by a mask image. Default value is border-box
mask-origin	Specifies the origin position (the mask position area) of a mask layer image. Default value is border- box
mask-size	Specifies the size of the mask layer image. Default value is auto
mask-composite	Specifies a compositing operation used on the current mask layer with the mask layers below it. Default value is add
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Create different mask layers for an image with linear and radial gradients:

.mask1 {
mask: linear-gradient(black, transparent);
}

.mask2 {
mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

.mask3 {
mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Try it Yourself »