title: Is it possible to apply gradient to box-shadow?
body: <p>I'm trying to create faded embossed box-shadow with css3. Till now, I have a embossed box-shadow, thanks to <a href="http://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/" rel="noreferrer">this</a> tutorial and <a href="http://css-tricks.com/examples/GradientBorder/" rel="noreferrer">this one</a>.</p>
  
  <p>Combining these two guides, I'm wondering is there any way to apply gradient on box-shadow?</p>
  
  <p>Here you may find what I'm trying to create:</p>
  
  <p><img src="https://i.stack.imgur.com/vtYXo.png" alt="enter image description here"></p>
  
  <p>and here is the problem:
  <img src="https://i.stack.imgur.com/FgdkO.png" alt="enter image description here"></p>
  
  <p>Note that dark box-shadow should fade.</p>
  
  <p>And find codes here: <a href="http://jsfiddle.net/xkc8Lvs1/" rel="noreferrer">http://jsfiddle.net/xkc8Lvs1/</a></p>
  
  <pre><code>.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);
  </code></pre>
  
  <p>}</p>