Question

I have an element that has inset box shadows, but I want the shadow on only the top.

Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?

Answer 1

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.