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

css

Solution

Because the shadow is part of the parent container it renders below the image. One alternative is to have a div which places a shadow overtop the image like so:

body {
  background-color: #BBB;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  border-radius: 20px;
}

main img {
  border-radius: 20px;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 3px 3px 10px 0 #000000;
  border-radius: 20px;
  top: 0;
  left: 0;
}

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

Edit: I've updated the fiddle to include border radius on the shadow and on the img which solves the issue identified in the comments.

Problem

I have a container that uses inset box shadow. The container contains images and text. The inset shadow apparently does not work on images: The white section here is the container. It contains a white image, and there is inset box shadow applied to it. ``` body { background-color: #000000; } main { position: absolute; bottom: 0; right: 0; width: 90%; height: 90%; background-color: #FFFFFF; box-shadow: inset 3px 3px 10px 0 #000000; } ``` ``` <main> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png"> </main> ``` Is there a way to make the inset box shadow overlap images?

Original source

Related problems