CSS Shadow on a element below another one

Question

I'm trying achieve the following shadow effect that I reproduced with Photoshop:

I suppose that an HTML base like the following would be sufficient but not sure:

<div id="anotherMask">
  <div id="mask">  
    <div id="shadow">
        <div id="content">
            FOO
        </div>
    </div>
  </div>
</div>

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:

https://jsfiddle.net/tvhydm74/

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:

https://jsfiddle.net/6gbsejq4/

Any Help would be appreciated :)

Answer 1

You can use an inset box-shadow:

.content {
  height: 100px;
  width: 100px;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: inset 3px 3px 7px 2px rgba(0, 0, 0, 0.75);
}

.container {
  display: inline-block;
  background: red;
  padding: 20px;
}

<div class="container">
  <div class="content">
    FOO
  </div>
</div>