CSS Masking
Posted: Fri Oct 27, 2023 8:25 am
CSS Masking
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
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.
Browser Support
Note: Most browsers only have partial support for CSS
masking. You will need to use the -webkit- prefix in addition to the standard
property in most browsers.
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-
Use an Image as the Mask Layer
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:
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; }
Try it Yourself »
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).
Another Example
If we omit the mask-repeat property, the mask image will be repeated all over the
image from Cinque Terre, Italy:
Example
Here is the source code:
.mask1 { -webkit-mask-image: url(w3logo.png); mask-image:
url(w3logo.png);}
Try it Yourself »
Use Gradients as the Mask Layer
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):
Example
Use a linear gradient as a mask layer:
.mask1 { -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black,
transparent);}
Try it Yourself »
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.
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);}
Try it Yourself »
Radial Gradient Examples
Here, we use a radial-gradient (shaped as a circle) as the mask layer for our image:
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%);}
Try it Yourself »
Here, we use a radial-gradient (shaped as an ellipse) as the mask layer for
our image:
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%);}
Try it Yourself »
Use SVG as the Mask Layer
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:
Sorry, your browser does not support inline SVG.
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>
Try it Yourself »
Sorry, your browser does not support inline 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>
Try it Yourself »
Sorry, your browser does not support inline 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>
Try it Yourself »
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
★
+1
Reference: https://www.w3schools.com/css/css3_masking.asp
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
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.
Browser Support
Note: Most browsers only have partial support for CSS
masking. You will need to use the -webkit- prefix in addition to the standard
property in most browsers.
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-
Use an Image as the Mask Layer
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:
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; }
Try it Yourself »
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).
Another Example
If we omit the mask-repeat property, the mask image will be repeated all over the
image from Cinque Terre, Italy:
Example
Here is the source code:
.mask1 { -webkit-mask-image: url(w3logo.png); mask-image:
url(w3logo.png);}
Try it Yourself »
Use Gradients as the Mask Layer
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):
Example
Use a linear gradient as a mask layer:
.mask1 { -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black,
transparent);}
Try it Yourself »
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.
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);}
Try it Yourself »
Radial Gradient Examples
Here, we use a radial-gradient (shaped as a circle) as the mask layer for our image:
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%);}
Try it Yourself »
Here, we use a radial-gradient (shaped as an ellipse) as the mask layer for
our image:
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%);}
Try it Yourself »
Use SVG as the Mask Layer
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:
Sorry, your browser does not support inline SVG.
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>
Try it Yourself »
Sorry, your browser does not support inline 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>
Try it Yourself »
Sorry, your browser does not support inline 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>
Try it Yourself »
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
★
+1
Reference: https://www.w3schools.com/css/css3_masking.asp