Masking
The CSS mask-image and SVG <mask> is to create a masking layer to control the transparency of an element. The transparency is determined by either alpha or luminance, depending on the masking mode/type.
1. Masking with CSS Gradient : mask-image
| CSS property: | mask-image |
| Value: | linear-gradient(), url(), image(); |
For Example:
<style>
.example1{
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>
<div class="example1">
<img src="img-cssmasking.png" alt="example 1 - masking with gradient" width="333" height="208">
</div>
Mask layer : Gradient:
linear-gradient(black, transparent);
Image:
img-cssmasking.png
Result:
In this example, by default, mask-mode: alpha;*
- If the layer mask is transparent, the masked element underneath will be hidden (transparent).
- If the layer mask is colored and has an opacity of 100%, the masked element underneath will be fully visible (opaque).
- The transparency of the masked element will adjust accordingly based on the alpha of the layer mask
**The mask-mode is a CSS property to define whether the transparency of the mask-image is determined based on luminance or alpha.
2. Masking with CSS images : mask-image
| CSS property: | mask-image |
| Value: | linear-gradient(), url(), image(); |
For Example:
<style>
.example2{
width: 333px;
height: 208px;
background-image: url(https://trivialab.files.wordpress.com/2022/09/img-cssmasking.png);
background-repeat: no-repeat;
background-position: center;
-webkit-mask-image: url(https://trivialab.files.wordpress.com/2022/09/img-cssmasking_png-2.png);
mask-image:url(https://trivialab.files.wordpress.com/2022/09/img-cssmasking_png-2.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.example2_bg{
width:100%;
background: pink;
}
</style>
<div class="example2_bg">
<div class="example2"></div>
</div>
(img-cssmasking.png)
Result:
3. Masking with SVG : <mask>
| SVG Element: | <mask> |
For Example:
<svg width="138" height="40" >
<mask id="example3">
<rect x="36" width="102" height="40" fill="#ffffff"/>
<path d="M0 19.5L30.75 1.74652V37.2536L0 19.5Z" fill="#ffffff"/>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://trivialab.files.wordpress.com/2022/09/img-cssmasking.png" mask="url(#example3)"></image>
</svg>
(img-cssmasking.png)
Result:
In this example, by default, mask-type: luminance;**
- If the layer mask is painted in pure black (RGB(0,0,0) or #000), the masked element underneath will be hidden (transparent).
- If the layer mask is painted in pure white (RGB(255,255,255) or #fff), the masked element underneath will be fully visible (opaque).
- If the layer mask is painted in any color between pure black and pure white, the transparency of the masked element will adjust accordingly.
**The mask-type is a CSS property to define whether the transparency of the SVG <mask> is determined based on luminancealpha
CSS Clipping : clip-path
The clip-path is a CSS property to create a vector clipping region that selects which part of an element should be showing. The area outside the clipping region will be hidden.
| CSS property: | clip-path |
For Example:
<style>
.container{
background-image: url(https://trivialab.files.wordpress.com/2022/09/img-cssmasking.png);
background-size: cover;
background-position: center;
}
.example1{
width: 100px;
height: 100px;
clip-path: circle(50%);
}
.example2{
width: 200px;
height: 100px;
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 82.5% 85%, 80.83% 99.17%, 70% 85%, 0% 85%);
}
.example3{
width: 100px;
height: 100px;
clip-path: inset(20% 10% 5% 10%);
}
.example4{
width: 100px;
height: 100px;
clip-path: ellipse(30% 40% at 50% 50%);
}
</style>
<div class="container example1"></div>
<div class="container example2"></div>
<div class="container example3"></div>
<div class="container example4"></div>
Result:
Example1 (circle)
Example2 (polygon)
Example3 (inset)
Example (ellipse)
The differences between Clipping vs. Masking
- The main usage of the
clip-pathis to control the visibility on the clipped area. The area outside the clipping region will be hidden. - The main usage of the
mask-imageand<mask>is to control the transparency of the masked area.
ui pencil 
Leave a Reply