The mask-image CSS property sets an image or gradient as a mask layer for an element, hiding specific parts of it based on transparency (the alpha channel).
By default, the opaque parts of your mask image keep the element fully visible, transparent parts hide the element completely, and semi-transparent parts create smooth fade-out effects. It behaves almost identically to background-image, meaning you can size, position, and repeat your mask using familiar CSS rules. Basic Syntax
The most common way to use mask-image is by loading a PNG or SVG image via the url() function. Because Chromium browsers still require a prefix for full compatibility, you should always include the -webkit- prefix alongside the standard property. Use code with caution. Core Companion Properties
To control how your mask interacts with the element, you will use properties that parallel CSS backgrounds: mask-image CSS property – MDN Web Docs
Leave a Reply