Is it possible to apply gradient to box-shadow?

Question

I'm trying to create faded embossed box-shadow with css3. Till now, I have a embossed box-shadow, thanks to this tutorial and this one.

Combining these two guides, I'm wondering is there any way to apply gradient on box-shadow?

Here you may find what I'm trying to create:

and here is the problem:

Note that dark box-shadow should fade.

And find codes here: http://jsfiddle.net/xkc8Lvs1/

.nav-tabs:after {
content:"";
height: 2px;
background: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.0) 100%);
display: block;
margin: 10px 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.0);

}

Answer 1

Here is one solution that is using one object and two linear gradients. Those are obviously not box-shadows, but you may add box-shadows to the element, like seen in the example below.

The downsite of using this is, that the linear gradient are IE10+ and box-shadow can be used IE9+

Js Fiddle Demo: http://jsfiddle.net/urwjb06x/1/

 .separator {
     height: 2px;
     border:none;
     background-color: transparent;
     background-image: 
        linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
        linear-gradient(90deg, rgba(255,255, 255,0), rgba(255, 255, 255, 1), rgba(255,255,255,0));

    box-shadow: rgba(255,255,255,0.8) 0 0 20px;

     background-repeat: no-repeat;
     background-position: 0 0, 0 1px;
     background-size: 100% 1px;
 }

Update: Now looks correct in Firefox. I forgot to change the rgba(0,0,0,0) to rgba(255,255,255,0), which is a huge difference of course. (here i found the eye opener)