How do I add a top and bottom shadow while scrolling but only when needed? : <p><strong>How do I add a shadow when a container overflows but only when needed?</strong></p>

<p>What I mean by this is:</p>

<ul>
<li>if there is content available to scroll either on top or bottom, show a shadow to tell the user there is more content to scoll</li>
<li>if there isn't content to scroll through, a shadow will not appear</li>
</ul>

<p>And to clarify further</p>

<ul>
<li>if the content of the container overflows (i.e. it scrolls) and the user is at the very top of the content then there should be a shadow on the <em>bottom</em> of the page and not the top.</li>
<li>Same goes if the user is at the bottom of the page expect that there should be a shadow on the top</li>
<li>if the content does not overflow the container, then <em>no</em> shadow should be shown to keep things clean.</li>
</ul>

<p>I have working javascript solutions but I want something <strong>purely css</strong> for performance reasons.</p>

<p>Any ideas?</p>
