Another option is to use one of my personal favorite CSS tools: box-shadow.
A box shadow is really a drop-shadow on the node. It looks like this:
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
The arguments are:
1px: Horizontal offset of the effect. Positive numbers shift it right, negative left. 2px: Vertical offset of the effect. Positive numbers shift it down, negative up. 3px: The blur effect. 0 means no blur. color: The color of the shadow.
So, you could leave your current design, and add a box shadow like this:
box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
This should give you a blurry top edge.
This website will help with more information: https://css-tricks.com/snippets/css/css-box-shadow/