How can I set a variable linear gradient colour?

Question

I am using a pure css version of 'clamping' as from this link inspired by Chris Coyier: http://codepen.io/bental/pen/JWEaJg

This means I have css (sass) such as:

.clamp:after {
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Sometimes the background is not white, so what I want to do is set the second colour to a variable colour.

I can only think of two options which I don't think work. This is what I've tried:

• Use inherit to get the parents background colour
• Use JS (Angular) to write to the :after element, and set the background property, which I don't think I can do in Angular
• Use the attr(data-something) property to access an attribute on the parent which I can set in Angular

Neither work for me. Does anyone know how I can set a linear gradient on a pseudo element (in this case :after)?

Answer 1

The inheriting way actually works. http://codepen.io/blackmiaool/pen/dvNqQM

Change the css as below:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  padding: 20px;
  font: 1.2em/1.2em 'Open Sans', sans-serif;
}
.module {
  width: 250px;
  margin: 0 0 1em 0;
  overflow: hidden;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), red 50%);
}
.module p {
  margin: 0;
  background:red;
}


.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background:inherit;
}