css - CSS Masking Part 1: Introduction to CSS Masking

CSS Masking is a technique used to control which parts of an element are visible and which are hidden. Unlike opacity, which affects the entire element, masking allows you to selectively hide parts of an element, creating effects such as cut-outs, transparency, and complex shapes.

There are two main properties used for CSS masking:

• mask-image: Defines an image (raster or vector) that acts as a mask.
• clip-path: Clips the element to a defined shape, making only certain portions visible.

Masking is widely used in UI/UX design to create advanced visual effects such as:

• Gradual fades
• Shaped images
• Advanced animations

Example 1: Basic Masking Using an Image

div {

width: 300px; height: 300px;

background: url('image.jpg') center/cover;

mask-image: url('mask.png');

-webkit-mask-image: url('mask.png');

}

Explanation: This code applies `mask.png` over `image.jpg`, allowing only the areas defined by `mask.png` to be visible. This technique is useful for creating custom-shaped images.