**How do I add a shadow when a container overflows but only when needed?**

What I mean by this is:

* 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
* if there isn't content to scroll through, a shadow will not appear

And to clarify further

* 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 *bottom* of the page and not the top.
* Same goes if the user is at the bottom of the page expect that there should be a shadow on the top
* if the content does not overflow the container, then *no* shadow should be shown to keep things clean.

I have working javascript solutions but I want something **purely css** for performance reasons.

Any ideas?