Posted on November 24, 2019
Now, I will admit that initially I wasn't super impressed. Yea, it looks really cool, but I assumed that the background image was just that, a background image. But then I noticed something. If you look at the top portion of the background image it actually covers the border. Now, it could just be some complex z-indexing, but I wanted to know.
Upon inspect, I discovered that the duck background was actually a 2k image of ducks, without masking. The masking itself is a completely separate image. The developers are using a CSS property I hadn't heard of until today called mask-image.
According to MDN:
The mask-image CSS property sets the image that is used as mask layer for an element.
This is an extremely interesting feature. Of course, I'd love to play with it, but I also was curious what the browser support was. To my surprise, it's actually pretty damn good! It looks like Safari has a few minor issues.
The feature is still considered experimental, but considering support and just how damn cool it is, I really want to check it out and see what I can do with it.