title: How to fade a box shadow in CSS?
body: <p>N.B. I've already looked at <a href="https://stackoverflow.com/questions/10938462/taper-fade-css-box-shadow">this post</a> and can't emulate it. I'm trying to replicate the shadow on the <a href="http://www.britishcouncil.se/" rel="nofollow noreferrer">British Council Sweden</a> site:</p>
  
  <p>This is as far as I've managed to get on <a href="http://solaslite.wpengine.com/" rel="nofollow noreferrer">my own site</a>:</p>
  
  <p>I can't post images yet but the HTML is structured like this:</p>
  
  <pre><code>&lt;div id="inner"&gt;
  &lt;!--Full width div, blue bar of color here--&gt;
  
      &lt;div class="wrap"&gt;
      &lt;!--Existing gradient background image here--&gt;
  
           &lt;div id="content-wrapper"&gt;
           &lt;!--Content begins--&gt;
           &lt;/div&gt;
  
       &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>The existing CSS:</p>
  
  <pre><code>#inner{
      background: #1e5799;
      background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#0057be));
      background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 100%);
      background: -o-linear-gradient(top,  #1e5799 0%,#0057be 100%);
      background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 100%);
      background: linear-gradient(to bottom,  #1e5799 0%,#0057be 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
      background-size: 1px 100px;
      background-repeat: repeat-x;
      margin: 0 auto;
      overflow: hidden;
      padding: 20px;
      position: relative;
  }
  
  #inner .wrap {
      background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 45%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(45%,rgba(0,0,0,0)));
      background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
      background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
      background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
      background: linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000',endColorstr='#00000000',GradientType=0 );
      border-radius: 10px;
  }
  
  #content-sidebar-wrap {
      background: #fff;
      float: left;
      margin: 1em;
  }
  </code></pre>