CODEWITHSUNDEEP
css
Shpigford
Shpigford

Reputation: 25368

Taper/fade CSS box shadow?

I've got a CSS drop down menu that I'm trying to build, and the background of the drop down has a faded/tapered box shadow:

enter image description here

I'm having trouble pulling off how to get the box shadow to actually taper/fade off.

Here's where I'm at right now: http://jsfiddle.net/Shpigford/f9aKR/

I've tried using :before and :after pseudo selectors, among other things, but can't quite get it right.

For clarification, I'm specifically only needing help with the shadow on the drop down. My jsFiddle is a stripped down version to keep the example as straightforward as possible.

Upvotes: 7

Views: 15716

Answers (1)

Paulo R.
Paulo R.

Reputation: 15609

  1. I've added a before element.
  2. gave it a gradient background (from transparent to a semi transparent black) to achieve the top to bottom fade.
  3. gave it an inset box shadow to achieve the in -> outfade.

Take a look -> http://jsfiddle.net/f9aKR/22/

Edit the amount of fade/colors as you want.

Upvotes: 12

Related Questions