title: How to have a shadow inside a CSS mask?
body: <p>Can I have a shadow inside a cutout made by an SVG mask?</p>
  <p>Here is the code that I'm working with</p>
  <p><code>index.html</code></p>
  <pre><code>&lt;div class=&quot;content&quot;&gt;
      &lt;section id=&quot;home-section&quot;&gt;
      &lt;/section&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  <p><code>styles.css</code></p>
  <pre><code>#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;
  }
  </code></pre>
  <p>This is the result that I'm getting
  <a href="https://i.stack.imgur.com/uQI6V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uQI6V.png" alt="CSS mask without shadow" /></a></p>
  <p>But this is the result that I want (I've made it in Illustrator):
  <a href="https://i.stack.imgur.com/8lE7f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lE7f.png" alt="CSS mask with shadow" /></a></p>
  <p>Here is the SVG: <a href="https://drive.google.com/file/d/1O7nGJHeYkgw9Al9BojSVI7f8zKzv4fbu/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1O7nGJHeYkgw9Al9BojSVI7f8zKzv4fbu/view?usp=sharing</a></p>