title: CSS shadow for :before and :after on a scrollable container
body: <p>I have a container which is scrollable. I would like to add an inset shadow at the beginning of the container and another one in the opposite direction at the bottom of the container. Attached is an image of what I have vs what I'm trying to achieve.</p>
  
  <p>This is the shadow I'm trying to attach at the top, and a reversed one at the bottom. Notice that the left and right side fade just a bit.<br>
  <img src="https://i.stack.imgur.com/SNTlv.png" alt="enter image description here"></p>
  
  <p>CSS for shadow:</p>
  
  <pre><code>.list { 
    height: 100px;
    overflow: auto;
    position: relative;
  }
  .list:before {
    content: "";
    position: absolute;
    width: 100%;
    margin: 0 auto;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
  }
  .list:after {
    content: "";
    position: absolute;
    width: 100%;
    margin: 0 auto;
    height: 12px;
    border: 0;
    box-shadow: inset 0 -12px 12px -12px rgba(0,0,0,0.5);
    bottom: 0;
  }
  </code></pre>
  
  <p>I have these two issues:</p>
  
  <ol>
  <li>When I scroll, the shadows move, how can I keep them in place?
  
  <ul>
  <li>I tried fixed position, but then they are not limited to the container.</li>
  </ul></li>
  <li>How can I achieve a slight fade on the shadow at the left and right?
  
  <ul>
  <li>I tried transform: rotateX(1deg) rotateY(0deg) rotateZ(0deg) with perspective: 10px but no real results - but I think this is a starting point.</li>
  </ul></li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/4yFTG.png" alt="enter image description here"></p>
  
  <p>A plunker with this code in it:</p>
  
  <p><a href="http://plnkr.co/edit/YREOxLXUfN7xCUQDwc77?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/YREOxLXUfN7xCUQDwc77?p=preview</a> </p>