title: Applying mask to box-shadow
body: <p>I have a div with a <code>mask</code> applied to it. I noticed that I can't apply a <code>box-shadow</code> on that same div, so I must move the shadow to a &quot;wrapper&quot; div.</p>
  <p>The problem is that if the shadow is placed on the shadow div, the <code>mask</code> is not applied to the shadow.</p>
  <p>How can I apply a <code>mask</code> to a div and to it's shadow?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 200px;
    height: 200px;
    box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75);
  }
  
  .b {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 2px solid black;
  
  
    
    -webkit-mask: radial-gradient(
      circle at center top,
      transparent 30px,
      black 31px
    ) top / 100% 51%, 
    radial-gradient(
      circle at right bottom,
      transparent 30px,
      black 31px
    ) right bottom / 51% 51%, 
    radial-gradient(
      circle at left bottom,
      transparent 30px,
      black 31px
    ) left bottom / 51% 51%;
    
    -webkit-mask-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="b"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>