mask-image

Example

Create a mask layer for an image:

.mask1 {
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

Try it Yourself »

Definition mask-image

The mask-image property specifies an image to be used as a mask layer for an element.

Tip: Linear and radial gradients in CSS can also be used as the mask image.

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.maskImage="url(star.svg)"

Browser Support mask-image

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

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
mask-image	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

CSS Syntax mask-image

mask-image: none|image|url|initial|inherit;

Property Values mask-image

Value	Description
none	This is default
image	An image to use as the mask layer
url	An url reference to an image or an SVG <mask> element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples mask-image

Example

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

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

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

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

Try it Yourself »

Example

Use the SVG <mask> element to create a mask layer for an image:

Try it Yourself »

Example

Use the SVG <mask> element to create a mask layer for an image:

Try it Yourself »