This is technically the same answer as @ChrisJ, with a few more details on how to make box-shadow
do your bidding:
for reference the * items are optional:
box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;
The <spread-radius>
needs to be negative <blur-radius>
(so that none of the other blurred sides show up), and then you need to bump the <offset-y>
down by the same amount:
box-shadow: inset 0 20px 20px -20px #000000;
It will give you a single gradient band across the top of the element.