title: CSS inner shadow
body: <p>I have a problem with css inner shadow. </p>
  
  <p>I have created this <strong><a href="http://codepen.io/shadowman86/pen/jEyXLr" rel="nofollow">DEMO</a></strong> from codepen.io</p>
  
  <p>So the problem is that inner shadow on the image can not be displayed.You will see if you click on the demo link at the bottom of the image can not be displayed inner shadow.</p>
  
  <p>How can i view inner shadow on the image?</p>
  
  <p>HTML :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #323949;
    font-family: 'mstfont' !important;
    margin: 0px;
    padding: 0px;
    min-width: 100%;
    float: left;
    height: 100%;
    -webkit-backface-visibility: hidden;
  }
  .globalHeader {
    z-index: 90;
    background-color: #323949;
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #3f4858;
    color: #fff;
    font-size: 40px;
    font-family: arial, sans-serif;
    -webkit-box-shadow: 0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
  }
  .globalHeader_in {
    z-index: 99999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-width: 960px;
    width: 100%!important;
    max-width: 1580px;
    height: 52px;
    left: 0;
    top: 0;
    padding: 0 20px 0 15px;
    margin: auto;
  }
  .profil-kapak {
    width: 100%;
    height: 385px;
    border-bottom: 1px solid #3f4858;
    -moz-box-shadow: inset 0 0 5px #000000;
    -webkit-box-shadow: inset 0 0 5px #000000;
    box-shadow: inset 0 0 5px #000000;
  }
  .image {
    margin: 0px auto;
    width: 900px;
    height: 385px;
    overflow: hidden;
  }
  .image img {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="globalHeader"&gt;
    &lt;div class="globalHeader_in"&gt;header&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="profil-kapak"&gt;
    &lt;div class="image"&gt;
      &lt;img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>