CSS `mask` Property

CSS Masking allows you to define a masking region, revealing only specific parts of an element. This technique can be used to create complex shapes, add effects, or control the visibility of content in a more intricate way than with simple clipping paths.

Common CSS Masking Properties

`mask-image`: Specifies the image or gradient to be used as a mask. The mask determines which parts of the element are visible.
`mask-mode`: Defines whether the mask image is treated as a luminance mask or an alpha mask.
`mask-position`: Sets the starting position of the mask image.
`mask-size`: Controls the size of the mask image.
`mask-repeat`: Determines how the mask image is repeated (similar to `background-repeat`).
`mask-origin`: Specifies the origin box of the mask image.
`mask-clip`: Specifies the area that is affected by the mask. It determines the region of the element that the mask is applied to.
`mask-composite`: Determines how multiple mask layers are combined with each other.

Examples of CSS Masking

Example: Basic Masking


/* Basic Masking Example */
.mask-basic {
    mask-image: url('https://via.placeholder.com/150');
    width: 100%;
    height: 300px;
    background-color: lightblue;
}

Example: Mask with Gradient


/* Mask with Gradient Example */
.mask-gradient {
    mask-image: linear-gradient(to right, transparent, black);
    width: 100%;
    height: 300px;
    background-color: coral;
}

Example: Masking with Position and Size


/* Masking with Position and Size Example */
.mask-position-size {
    mask-image: url('https://via.placeholder.com/150');
    mask-position: center;
    mask-size: 50%;
    width: 100%;
    height: 300px;
    background-color: palegreen;
}

Explanation of CSS Masking Properties

- `mask-image`: The image or gradient used as the mask. It determines which parts of the content will be visible or hidden.
- `mask-mode`: Defines whether the mask is treated as a luminance mask (where brightness determines visibility) or an alpha mask (where transparency determines visibility).
- `mask-position`: Specifies the position of the mask image within the element.
- `mask-size`: Controls the dimensions of the mask image, similar to how `background-size` works.
- `mask-repeat`: Determines how the mask image is repeated (or not) across the element.
- `mask-origin`: Specifies the origin box of the mask image, determining the area where the mask is applied.
- `mask-clip`: Defines the region of the element that the mask applies to, often used to constrain the mask to a specific area.
- `mask-composite`: Determines how multiple mask layers interact with each other, defining how they combine.