title: CSS Shadow on a element below another one
body: <p>I'm trying achieve the following shadow effect that I reproduced with Photoshop:</p>
  
  <p><a href="https://i.stack.imgur.com/fBcBl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fBcBl.png" alt="enter image description here"></a></p>
  
  <p>I suppose that an HTML base like the following would be sufficient but not sure:</p>
  
  <pre><code>&lt;div id="anotherMask"&gt;
    &lt;div id="mask"&gt;  
      &lt;div id="shadow"&gt;
          &lt;div id="content"&gt;
              FOO
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't want to add the CSS here because It will make that question a bit too long. So  here are two example of approach, there is more in reality. I tried with a box shadow but it doesn't work as expected:</p>
  
  <p><a href="https://jsfiddle.net/tvhydm74/" rel="nofollow noreferrer">https://jsfiddle.net/tvhydm74/</a></p>
  
  <p>I tried with a div and black border, a background transparent and a Blur filter on a  that is under an another one but it filter everything so it doesn't work:</p>
  
  <p><a href="https://jsfiddle.net/6gbsejq4/" rel="nofollow noreferrer">https://jsfiddle.net/6gbsejq4/ </a></p>
  
  <p>Any Help would be appreciated :) </p>