Why doesn’t inset box-shadow work over images?

Just to chime in on this, because I was just creating something similar…

I hate polluting my markup with extra elements for the sake of styling, so the CSS solution is to use the :after pseudo element:

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>

It’s probably too late for what you were trying to do, but is the better solution in my estimation.