putting a inset box shadow on an image or image within a div

Question

I have an image on my page which i want to put an inset box shadow on. I have tried doing this with the image both in, and out, of a div. Can anyone help me to get an inset

Answer 1

Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div.

You can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.

div {
    position: relative; /* Not required now */
    margin: 10px;
    float: left;
    box-shadow: inset 0 0 12px blue;
    border-radius: 50%;
}

div img {
    display: block;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
    z-index: -1;
}

Demo

Answer 2

The other answers that propose z-index have an issue if put into context, in my case the image disappeared behind the main div. Preventing this involves setting z-index: 1; (and non static position) to all of the ancestor elements, which is problematic, and may break a lot of existing layout.

I found a clean solution that doesn't require having to touch all ancestor elements.

I finally figured it out with the help of Understanding z-index - The Stacking Context

HTML

The markup stays like this:

<div class="box-shadow">
    <img src="/images/graphic.jpg" />
</div>

The challenge is to put the wrapper div and the image into a single stacking context. For this you have to apply styles to the parent element.

Stacking Context CSS

According to the linked article, the following elements create a stacking context:

• the root element (HTML),
• positioned (absolutely or relatively) with a z-index value other than "auto",
• a flex item with a z-index value other than "auto",
• elements with an opacity value less than 1. (See the specification for opacity),
• elements with a transform value other than "none",
• elements with a mix-blend-mode value other than "normal",
• elements with isolation set to "isolate",
• on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"
• specifing any attribute above in will-change even you don't write themselves directly

If we focus on the options that make sense for this use case, we have these alternatives, assuming the parent element of the .box-shadow element is #parent:

1. Positioning and z-index:

This is what I would choose if possible:

#parent {
    position: relative;
    z-index: 0;
}

2. Opacity

If the parent element needs to have a different position attribute or adding z-index has unwanted side effects, you can use an opacity value that's almost 1, so that it has no visible effect but still creates a stacking context:

#parent {
    opacity: 0.999;
}

Finally, the shadow CSS

Then you can apply the shadow on the div and move the img behind it with z-index:

.box-shadow {
    box-shadow: 0 0 10px 6px white inset;
}
.box-shadow img {
    display: block;
    position: relative;
    z-index: -1;
}

Answer 3

Most of the solutions posted here have problems with the parent elements, a simple solution to this, is using pseudo elements:

.box-shadow
{
  background-color: #fff;
  height: 235px;
  margin: 32px 24px;
  text-align: center;
  width: 500px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.box-shadow::after
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 10px 10px #000;   
  -moz-box-shadow: inset 0 0 10px 10px #000;
  box-shadow: inset 0 0 10px 10px #000;
  border-radius: 50%;
  overflow: hidden;
}

<div class="box-shadow">
    <img src="http://www.google.com/logos/2012/addams11-hp.jpg" />
</div>

Answer 4

Here’s a clean, simple and modern approach of CSS pseudo-elements to place a box shadow “on top of an image”, since img tags themselves don’t support pseudo-elements.

HTML:

<div class="box-shadow">
    <img src="http://i.stack.imgur.com/8LzBY.jpg" />
</div>

CSS:

.box-shadow {
    position: relative;
    text-align: center;
}

.box-shadow::after {
    box-shadow: inset 0 0 10px 10px #000;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.box-shadow img {
    max-width: 100%;
    width: auto;
}

View the accompanying JSFiddle.

Answer 5

.backing {
    position:relative;
    z-index:-10;
    float:left;
    margin-left:12%;
    box-shadow: inset 0 0 50px 50px  #FFF;
    -moz-box-shadow: inset 0 0 50px 50px  #FFF;
    -webkit-box-shadow: inset 0 0 50px 50px  #FFF;

}

.next {
    position:relative;  
    margin-left:8%;
    z-index:200;
}

.back {
    position:relative;
    margin-left:2%;
    z-index:220;

}

<div id="logo">
  <img src="//picsum.photos/100"  width="3%" height="3%"/>
</div>

<a href="scene2.html" class="next">Next</a>
<a href="abduction.html" class="back">Back</a>

<img src="//picsum.photos/650"  width="650" height="650" class="backing"/>