CSS: Masking

In CSS, masking refers to the technique of selectively showing or hiding parts of an element or an image using another element or image as a mask. This allows you to create various visual effects, such as revealing parts of an image based on a shape, gradient, or pattern. Masking in CSS is achieved using the mask property or its variations.

Masking with mask-image

The mask-image property is used to specify an image or SVG element as the mask for an element. The masked element will only be visible where the mask image has non-transparent pixels.

Syntax

.element {
    mask-image: url('mask-image.png');
    mask-mode: alpha; /* Optional: specifies how the mask is applied (alpha, luminance, luminance-alpha, match-source) */
}

Masking with mask

The mask property is a shorthand for setting various masking properties at once, including mask-image, mask-mode, mask-repeat, mask-position, mask-size, and mask-composite.

Syntax

.element {
    mask: url('mask-image.png') alpha repeat-x 0 0 / auto space;
}

Masking with SVG

You can also use SVG elements as masks. This gives you more flexibility and control over the masking effect, allowing you to create complex shapes and gradients as masks.

Example

.element {
    mask-image: url('mask.svg');
}

Masking Modes

The mask-mode property defines how the mask image is applied to the element. Common values include:

• alpha: The mask is applied using the alpha channel of the mask image.
• luminance: The mask is applied using the luminance (brightness) values of the mask image.
• luminance-alpha: The mask is applied using both luminance and alpha values.
• match-source: The mask is applied using the same mode as the source image.

Masking with Gradients

You can create gradient masks using CSS gradients. This is useful for creating effects like fading or revealing parts of an element.

Example

.element {
    mask-image: linear-gradient(to right, transparent, black);
}

Masking with Browser Support

It's important to note that masking with CSS has varying levels of browser support, especially for advanced features like SVG masks and complex masking modes. Always check compatibility and consider fallback options or polyfills for older browsers if needed.

Conclusion

CSS masking allows you to create visually appealing effects by selectively showing or hiding parts of elements using masks. Whether using images, SVGs, gradients, or other elements as masks, understanding CSS masking techniques can help you achieve creative designs and enhance user experience on the web.