CSS Masking
You can entirely or partially hide an element by applying a mask layer that you generate using CSS masking.
The CSS mask-image Property
A mask layer image is specified by the CSS mask-image attribute.
The image used for the mask layer may be an SVG, PNG, CSS gradient, or SVG <mask> element.
Browser Support
Note: CSS masking is only partially supported by the majority of browsers. In most browsers, you’ll also need to use the -webkit- prefix in addition to the normal property.
The first browser version that fully supports the attribute is shown by the numbers in the table below. The version that supported a prefix the first time is indicated by numbers that come after -webkit-.
Use an Image as the Mask Layer
utilize a url() value to pass in the mask layer image if you want to utilize a PNG or SVG as the mask layer.
There must be a transparent or semi-transparent portion of the mask image. Complete transparency is indicated by black.
----- photo mukvu -----
Example
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 image to be used as an element’s mask layer is specified by the mask-image attribute.
If and how a mask picture is repeated is specified by the mask-repeat attribute. The mask picture will only be displayed once, according to the no-repeat value, which signals that it won’t be repeated.
Another Example
The photograph from Cinque Terre, Italy will have the mask image repeated all over it if the mask-repeat property is ignored:
-----IMAGE MUKAVI-----
Example
Here is the source code:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
}
Use Gradients as the Mask Layer
It is also possible to utilize CSS radial and linear gradients as mask images.
Linear Gradient Examples
Here, the mask layer for our image is a linear gradient. This linear gradient is transparent at the bottom and black at the top:
Example
Use a linear gradient as a mask layer:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
Here, the mask layer for our image is created using text masking and a linear gradient:
------IMAGE MUKAVI------
Example
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, the mask layer for our image is a radial-gradient in the form of a circle:
Example
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 employ an elliptical radial gradient as our image’s mask layer:
Example
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) 50%);
}
Use SVG as the Mask Layer
To achieve masking effects inside an SVG graphic, utilize the <mask> element.
Here, we generate multiple mask layers for our image using the SVG <mask> element:
Example
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="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Example
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="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Example
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="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>
CSS Masking Properties
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 |
