Box-shadow on element with -webkit-mask-image

Thanks for that. It really helped me out. I had to add :

mask-image: url("URL of Mask Image");
mask-size: 100%;

to get it to render correctly in Edge.

The problem your having is that the box-shadow is being clipped out with the -webkit-mask-image since that option clips anything including the box-shadow element.

The Solution

Use the mask image as another element displayed under the masked image so you can use its shape to render a shadow. In order to do this, we must know the width and height of the image that is originally being masked. If you don't know the image size or if it's dynamic you can use JavaScript.

The problem we face is that we can't use box-shadow since it will render a box shadow which won't match the shape of the mask.

The box-shadow doesn't render around the shape

---

Instead, we will try to emulate it using a drop-shadow filter.

I prefer to wrap the image being masked with a div with the same size and has a background image of the mask image. This is what it will look like.

HTML

<div class="image-container">
    <img class="wrap-image" src="<Original Image URL>" id="wrap-image">
</div>

CSS

.image-container {
    width: <Original Image Width>;
    height: <Original Image Width>;
    background-size: 100%;
    background-image: url(URL of Mask Image);
    -webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -moz-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -ms-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -o-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
}

#wrap-image {
    mask: url("URL of Mask Image");
    -webkit-mask-box-image: url("URL of Mask Image");
}

Here's a JSFiddle.