How to make a gradient overlay at bottom of list to indicate more items

Question

I'm trying to make (using only CSS3) an edge that can be either on the bottom, left, top, or right edge of a container div, so that the list of elements inside it get overlapped by it, as a visual indicator to the user that there are more items. See mockup below. How can I do this in CSS3? (black box is set to overflow: scroll)

Using box-shadow with inset doesn't work because that's background and the shadows need to overlay the content yet the content still needs to be clickable and scrollable.

Answer 1

A pseudo element could be used too : http://codepen.io/anon/pen/sghyb

HTML test

<nav>
  <ul>
    <li>List</li>
     ...
  </ul>
</nav>

CSS test

nav {
  display:table;
  margin:auto;
  font-size:50px;
  position:relative;
}
nav:after {
  content:' ';
  position:absolute;
  left:0;
  right:17px;
  height:1em;
  top:6.3em;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,0.95) 50%
  );
  z-index:1;
}
ul {
  background:#000;
  margin:0;
  padding:0;
  color:silver;
  width:15em;
  height:7.3em;
  overflow:auto;
}
li {
  display:block;
  font-weight:bold;
}

Answer 2

I do it like this:

HTML

<div class="container">
    <div class="scroll">

        <div class="content">
        ## content to scroll
        </div>
        <div class="shade"></div>
    </div>
</div>

CSS

.scroll { position:relative;}
.shade  { position:absolute; bottom:0; height:30px; z-index:10;
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(152,152,152,0) 40%, rgba(23,23,23,1) 90%, rgba(0,0,0,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(152,152,152,0)), color-stop(90%,rgba(23,23,23,1)), color-stop(99%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(23,23,23,1) 90%,rgba(0,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(23,23,23,1) 90%,rgba(0,0,0,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(23,23,23,1) 90%,rgba(0,0,0,1) 99%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(23,23,23,1) 90%,rgba(0,0,0,1) 99%); /* W3C */
}

Of course style all elements as needed, and if your '.scroll' is element is a '' just have your '.shade' an LI.