Fade to background color with CSS

Question

Is there a way to get the below effect of fading to the parent background-color without redeclaring the background-color with a linear gradient in the child text element? I want a disappearing text effect like the below. I was thinking maybe some sort of mask, or opacity trick. It may even take advantage of inheriting the background-color.

I ask because I have multiple different background colors with different classes for the same html structured divs, but I don't want to rewrite all the colors in both places, making for twice the updating.

I know things like less and sass have variables that might help, but I'm most likely looking for a pure css way unless you can convince me otherwise. (I work with designers on my team so adding a css pre processor seems like a bit too much tooling for them.)

body {
  font-family: sans-serif;
  color: #000;
}

.main {
  height: 200px;
  background-color: rgb(100,255,150);
  padding: 20px;
}

.text {
  background-color: inherit;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}

p:before {
  background: linear-gradient(to bottom, rgba(100,255,150,0.3) 60%, rgba(100,255,150,1)); 
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div class="main">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae massa nisl. Sed in dignissim felis. Integer eu quam id massa posuere auctor. Curabitur consectetur velit urna, sit amet laoreet dui congue nec. Sed commodo nisl ac viverra semper. Proin at porttitor purus. Sed pretium vel diam fringilla venenatis. Aenean imperdiet lacinia lectus at dignissim. Sed nulla ligula, mollis at justo vitae, dictum gravida nisi. Maecenas lacinia risus neque. Ut et ante vitae erat tincidunt finibus et sit amet nunc. Quisque tellus ante, euismod vel vestibulum ut, commodo sed justo. In pellentesque, felis a consectetur eleifend, odio ex dapibus lorem, sit amet suscipit orci lacus eu ligula.

Fusce eget maximus ligula. Aenean eu mi et eros faucibus mattis. Sed bibendum hendrerit lorem, ut varius urna eleifend sit amet. Duis magna ex, auctor et commodo quis, posuere non purus. Nunc nec erat rutrum orci molestie volutpat. Suspendisse bibendum odio id ornare sodales. Nulla ornare libero ipsum, quis tempus odio molestie eu. Ut id libero mauris. Morbi vel tristique velit. Duis hendrerit erat dolor, sit amet euismod massa dictum nec.
  </p>
</div>

Answer 1

You can use this solution but, this only works in the latest versions of modern browsers like Chrome, Safari and Opera, Firefox has not a complete support for this feature. For more information go here CanIuse

body {
  font-family: sans-serif;
  color: #000;
}

.main {
  height: 200px;
  background-color: rgb(100,255,150);
  padding: 20px;
}

.text {
  background-color: inherit;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;

  -webkit-mask-image: -webkit-gradient(linear, left top, 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  }
}

<div class="main">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae massa nisl. Sed in dignissim felis. Integer eu quam id massa posuere auctor. Curabitur consectetur velit urna, sit amet laoreet dui congue nec. Sed commodo nisl ac viverra semper. Proin at porttitor purus. Sed pretium vel diam fringilla venenatis. Aenean imperdiet lacinia lectus at dignissim. Sed nulla ligula, mollis at justo vitae, dictum gravida nisi. Maecenas lacinia risus neque. Ut et ante vitae erat tincidunt finibus et sit amet nunc. Quisque tellus ante, euismod vel vestibulum ut, commodo sed justo. In pellentesque, felis a consectetur eleifend, odio ex dapibus lorem, sit amet suscipit orci lacus eu ligula.

Fusce eget maximus ligula. Aenean eu mi et eros faucibus mattis. Sed bibendum hendrerit lorem, ut varius urna eleifend sit amet. Duis magna ex, auctor et commodo quis, posuere non purus. Nunc nec erat rutrum orci molestie volutpat. Suspendisse bibendum odio id ornare sodales. Nulla ornare libero ipsum, quis tempus odio molestie eu. Ut id libero mauris. Morbi vel tristique velit. Duis hendrerit erat dolor, sit amet euismod massa dictum nec.
  </p>
</div>