HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
With CSS masking you create a mask layer to place over an element to partially or fully hide portions of the element
The CSS mask-image
property specifies a mask
layer
image.
The mask layer image can be a PNG image, an SVG image, a CSS gradient, or an SVG <mask> element.
The numbers in the table below 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- |
To use a PNG or an SVG image as the mask layer, use a url() value to pass in the mask layer image.
The mask image needs to have a transparent or semi-transparent area. Black indicates fully transparent.
Here is the mask image (a PNG image) we will use:
Here is an image from Cinque Terre, in Italy:
Now, we apply the mask image (the PNG image above) as the mask layer for the image from Cinque Terre, Italy:
Here is the source code:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Example Explained
The mask-image
property specifies the image
to be used as a mask layer for an element.
The mask-repeat
property specifies if or how
a mask image will be repeated. The no-repeat
value indicates that the mask image will not be repeated (the mask image will
only be shown once).
If we omit the mask-repeat
property, the mask image will be repeated all over the
image from Cinque Terre, Italy:
Here is the source code:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
CSS linear and radial gradients can also be used as mask images.
Linear Gradient Examples
Here, we use a linear-gradient as the mask layer for our image. This linear gradient goes from top (black) to bottom (transparent):
Use a linear gradient as a mask layer:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Here, we use a linear-gradient along with text masking as the mask layer for our image:
The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.
The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.
The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.
Use a linear gradient along with text masking as a mask layer:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Radial Gradient Examples
Here, we use a radial-gradient (shaped as a circle) as the mask layer for our image:
Use a radial gradient as a mask layer (a circle):
.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%);
}
Here, we use a radial-gradient (shaped as an ellipse) as the mask layer for our image:
Use another radial gradient as a mask layer (an ellipse):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
The SVG <mask>
element can be used inside an
SVG graphic to create masking effects.
Here, we use the SVG <mask>
element to create different mask layers for
our image:
An SVG mask layer (formed as a triangle):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="https://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
An SVG mask layer (formed as a star):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="https://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
An SVG mask layer (formed as circles):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
The following table lists all the CSS masking properties:
Property | Description |
---|---|
mask-image | Specifies an image to be used as a mask layer for an element |
mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
mask-repeat | Specifies how the mask layer image is repeated |
mask-size | Specifies the size of a mask layer image |