Q:

CSS fade to background

I have looked everywhere so much so that it looks like it's not possible yet. 
I am looking for something like an opacity gradient mask if that makes sense. 
Like this:

It may just look like a straight forward text fade from white to transparent but it's more so that it's the div that the text is within which is fading to background. 
The text is overflowing outside the div area so it's indicating to a user to scroll up. 
So it's like a layer mask with a gradient in photoshop, maybe something like {opacity: linear-gradient(#fff, #000)}, does something like this exist? 
Is this a possibility with CSS at all? 

A:

You can get this effect with masking.  mask-image = gradient makes it

.base {
  background: url("http://placekitten.com/1000/750");
  width: 400px;
  background-size: cover;
}

.faded {
  -webkit-mask-image: linear-gradient(0deg, transparent, black);
  }
<div class="base">
  <div class="faded">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Curabitur non tincidunt augue.  Vestibulum sit amet est et tellus blandit bibendum quis id neque.  Quisque lacinia, nunc et pharetra egestas, mi sapien tristique ante, quis fringilla sem leo et eros.  Donec porttitor id nisl non egestas.  Cras sed neque consectetur, hendrerit est in, ullamcorper sem.  Suspendisse dolor nunc, maximus ac elit efficitur, congue tempus nisi.  Fusce nec imperdiet mi, a porttitor sem.  Vestibulum tincidunt, libero a lacinia commodo, felis sapien malesuada turpis, eu accumsan ligula elit vestibulum ipsum.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Nulla gravida varius ex ac luctus.  In non sapien nibh.  Aliquam efficitur eu risus vitae aliquam.  Nunc risus est, tincidunt sit amet consectetur quis, bibendum nec tellus.  Vivamus non faucibus velit, nec tempor quam. 

Morbi sem tortor, tristique at ex in, cursus gravida ante.  Curabitur ut mi id arcu semper ullamcorper id mollis nibh.  Phasellus et pharetra odio.  Mauris lacinia hendrerit ante.  Donec cursus urna felis, vitae dictum neque varius sit amet.  Donec ut tristique turpis.  Integer faucibus dictum tempus.  Suspendisse id eros a erat sodales hendrerit.  Ut et mauris quis sapien dictum pharetra.  Pellentesque ornare nulla diam, porttitor interdum felis ultricies non.  Proin tempus libero in lacus efficitur elementum.  Morbi venenatis dignissim ante, sed bibendum libero tempor vitae.</div></div>

This will work only on webkit browsers.  You can get Firefox support by doing it on a svg element

