title: How can I set a variable linear gradient colour?
body: <p>I am using a pure css version of 'clamping' as from this link inspired by Chris Coyier:
  <a href="http://codepen.io/bental/pen/JWEaJg" rel="nofollow noreferrer">http://codepen.io/bental/pen/JWEaJg</a></p>
  
  <p>This means I have css (sass) such as:</p>
  
  <pre><code>.clamp:after {
     background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
  </code></pre>
  
  <p>Sometimes the background is not white, so what I want to do is set the second colour to a variable colour. </p>
  
  <p>I can only think of two options which I don't think work. This is what I've tried:</p>
  
  <ul>
  <li>Use inherit to get the parents background colour</li>
  <li>Use JS (Angular) to write to the :after element, and set the background property, which I don't think I can do in Angular</li>
  <li>Use the attr(data-something) property to access an attribute on the parent which I can set in Angular</li>
  </ul>
  
  <p>Neither work for me. Does anyone know how I can set a linear gradient on a pseudo element (in this case :after)?</p>