In the design world, masking is a popular technique to achieve
unique design effects. As a designer, I’ve used it many times, but
my usage of it on the web is rare. I think that the reason that kept
me from not using a CSS mask is the browser support, they are
partially supported in blink browsers (Chrome and Edge) and fully
supported in Safari and Firefox.
The great news is that CSS masking will be part of Interop
2023, which means we should expect
cross-browser support (Yay!!).
In this article, I will go through what CSS masking is, how it
works, and a few use cases and examples for it.