CSS Masking gives you the ability to hide parts of an element. This is usually done using another image or a shape defined in your CSS code.
clip-pathThe clip-path property creates a "clipping region" that sets what part of an element should be shown.
.circle {
clip-path: circle(50%);
}
.pentagon {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%,
18% 100%, 0% 38%);
}mask-imageThe mask-image property uses an image or a gradient as a mask. Black areas are visible, and transparent areas are hidden.
.masked {
-webkit-mask-image: radial-gradient(circle, black, transparent);
mask-image: radial-gradient(circle, black, transparent);
}-webkit- prefix for better browser support when using mask-image. For complex shapes, use an SVG clip-path.