Understanding the Inset Box-Shadow Issue over Images

In web design, using inset box shadows to create depth and dimension within elements is a common technique. However, when dealing with containers containing images, it's not always straightforward. The problem arises when the inset box shadow seems to disappear over the embedded images.

The Case of Invisible Shadows

Consider the example provided in the original question:

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::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

While the goal is to apply an inset box shadow around the container, including the image, it fails to appear. Why does this happen?

The Issue of Image Transparency

The reason behind the missing shadow on images lies in transparency. When an image has a transparent background, it's essentially a window to the background element. In this case, the background of the container is black. As a result, the inset shadow becomes invisible on the transparent areas of the image.

Overcoming the Transparency Barrier

To work around this issue, a simple and elegant solution is available: using the CSS :after pseudo element. By adding a :after pseudo element to the container, we can create an extra layer that sits on top of the image and receives the inset box shadow.

In the updated CSS snippet below, we apply the :after pseudo element to the

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

With this modification, the inset box shadow now appears over both the opaque and transparent areas of the image, giving the desired shadow effect.