title: Gradient fade on three sides
body: <p>I'm trying to make a <code>div</code> where the background color fades on the left, top, and bottom. I want the div to fade evenly from <code>#FFF</code> to <code>#CCC</code> from left to right, and to fade to <code>#FFF</code> on the top and bottom <code>30px</code> or <code>10%</code>.</p>
  
  <p>To do this, it seems I need to layer gradients. I've tried <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient" rel="nofollow">radial gradients</a>, but they seem to provide only circles and ellipsis, which is not what I'm looking for. I'm looking for a linear fade.</p>
  
  <p>So, I tried layering gradients using the before element, and for some reason the top gradient doesn't appear to be overwriting the bottom one.</p>
  
  <p><a href="http://jsfiddle.net/44osy5xj/" rel="nofollow">JSfiddle</a></p>
  
  <pre><code>div::before {
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 10%,rgba(204,204,204,0.5) 90%,rgba(255,255,255,1) 100%);
  }
  
  div {
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%);
  }
  </code></pre>