How to add inner shadow to image in CSS

Question

I'm trying to add an inner shadow to an image, but I can't get the result that I want.

Here's what I have currently:

https://codepen.io/nvision/pen/lBKEy

.shadow {
  display: inline-block;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
}

.shadow img {
  max-width: 100%;
  position: relative;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

The problem is this light-grey padding between the bottom of the image and the actual inner shadow. What I'd like to have is no padding at all. Just an inner shadow, and that's it.

Here's an example of what I'm trying to achieve:

Answer 1

Add display: block to the img elements to remove the padding below. This is because img elements are rendered inline by default. All inline-block elements has some vertical-align value by default- reset it either by applying vertical-align: top or reset the display property by applying display: block. See demo below:

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.shadow {
  display: inline-block;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}
.shadow:hover {
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
  box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
}
.shadow img {
  max-width: 100%;
  position: relative;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: block; /* ADDED */
}

.column {
  float: left;
  width: 25%;
  padding: 0 15px;
}

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/250/250">
  </div>  
</div>

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/370/370">
  </div>
</div>

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/200/200">
  </div>
</div>

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/400/400">
  </div>
</div>