If Your CSS Mask Image Doesn’t Work…

TL;DR: The CSS mask image doesn’t work on local files, you could only see it over localhost, or a server.

I’m sure you know of the ability to use an image as an alpha mask in CSS. Having tried this before, yesterday I have written these codes that I’m fairly sure it should work out of the box:

<!-- the CSS -->
<style>
  body {
    background: #c1b6a5;
  }
  img.masked {
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
  }
</style>


<!-- the image -->
<img class="masked" src="photo.png">

Then I opened the HTML file, and here’s the outcome:

Yep, there’s nothing here.

Upon inspection, the image element was there, just not being displayed. So I quickly replaced the mask with a gradient:

  img.masked {
    -webkit-mask-image: linear-gradient(black, transparent);
    mask-image: linear-gradient(black, transparent);
  }

To my surprise, it worked:

When I retried and checked the console, the following error showed up:

Access to image at ‘file:///Users/shuqi/css-mask/mask.png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

Now it’s become clear that even though the <img> tag is not restricted to CORS policy, the mask-image does. It’s a security measure for modern browsers to not allow any webpage to access your filesystem (via file:///).

Going further, I placed them where my localhost is, and viola!

Just what I was trying to achieve!