How to have a shadow inside a CSS mask?

Question

Can I have a shadow inside a cutout made by an SVG mask?

Here is the code that I'm working with

index.html

<div class="content">
    <section id="home-section">
    </section>
    ...
</div>

styles.css

#home-section {
    background: url(img/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-mask: url(img/mask.svg) center/contain no-repeat;
    -webkit-mask-size: auto;
}

This is the result that I'm getting

But this is the result that I want (I've made it in Illustrator):

Here is the SVG: https://drive.google.com/file/d/1O7nGJHeYkgw9Al9BojSVI7f8zKzv4fbu/view?usp=sharing

Answer 1

drop-shadow filter can help you here if you consider masking like below:

.box {
    height:300px;
    background:url(https://picsum.photos/id/1072/800/600) center/cover;
   overflow:hidden;
}

.box div {
  filter:drop-shadow(0 0 5px black);
  height:100%;
}

.box div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  -webkit-mask:
   /* your mask here */
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left/33% auto,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center/33% auto,
     linear-gradient(#fff 0 0) right 10% top 50%/30% 80%,
    /* end of your mask*/
    linear-gradient(#fff 0 0);
   -webkit-mask-composite:destination-out;
   mask-composite:exclude;
   -webkit-mask-repeat:no-repeat;
}

<div class="box">
  <div></div>
</div>

Using your mask the code will be:

.box {
    height:300px;
    background:url(https://picsum.photos/id/1072/800/600) center/cover;
   overflow:hidden;
}

.box div {
  filter:drop-shadow(0 0 5px black);
  height:100%;
}

.box div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  -webkit-mask:
    url('https://i.ibb.co/JspDMsM/thebirds-mask3.png') center/contain no-repeat,
    linear-gradient(#fff 0 0);
   -webkit-mask-composite:destination-out;
   mask-composite:exclude;
   -webkit-mask-repeat:no-repeat;
}

<div class="box">
  <div></div>
</div>