css3 box shadows in one direction only?

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.

Leave a Comment