How to fade out text on top of semi-transparent div using CSS?

Question

I've seen a lot of questions on here about how to fade out text using CSS, but all of the answers so far assume the element under the text has a solid background. How would you fade out text if the text is on top of a div that itself has opacity less than 1 (i.e., semi-transparent)? Run the code below to see an example. What I'm trying to do is fade out the text in that box in a vertical gradient such that the font color is white at the top and fades into the semi-transparent background of the box when it reaches the bottom.

NOTE: The solution should work without modification even when the div's background opacity changes (e.g., 0.75 instead of 0.5).

body {
  background: #333;
  color: #fff;
}

.box {
  width: 320px;
  background: rgba(204, 153, 153, 0.5);
  border: 2px solid #000;
  padding: 1rem;
}

.box > p {
  margin: 0;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div>

Answer 1

I finally found a solution that meets all my requirements by adding just one line of CSS to .box > p: -webkit-mask-image (accepted answer by Adrian van Vliet). I've updated my codepen to show this solution: http://codepen.io/thdoan/pen/wKZBrN

.box > p {
    -webkit-mask-image: -webkit-gradient(
        linear,
        left 50%,
        left bottom,
        from(rgba(0,0,0,1)),
        to(rgba(0,0,0,0))
    );
}

Even though this is considered "non-standard" CSS, it's no big deal for my case since if a browser doesn't support it then the content will degrade gracefully to white text simply not having a gradient fade. In the meantime, I am experimenting with another solution that is more cross-browserish using SVG: Applying SVG effects to HTML content. I will update this answer with a codepen using an SVG mask if I ever get it to work.

Thanks to all who replied :-).

UPDATE: Here is a solution using SVG: http://codepen.io/thdoan/pen/rObVdJ

The full cross-browser solution is laid out in the nice tutorial, CSS Masks – How To Use Masking In CSS Now by Christian Schaefer.

Answer 2

If you just always want the text transparent you can use the RGBA color value. Where the last value, alpha controls the opacity of the text from 0 to 1

.box > p {
color: rgba(255, 255, 255, .5);
}

or if you want to transition

If you want it to change it on hover

.box > p {
color: rgba(255, 255, 255, .5);
}
.box > p:hover {
color: rgba(255, 255, 255, 1);
}

Edit: you wanted it to gradient transparent? I found an example of that, http://output.jsbin.com/iwepas/3/

Essentially you just need to layer something over it and give it a gradient color from transparent to opaque. That example uses the ::after pseudo.

.box > p {
  position: relative;
}

.box > p::after {
  position: absolute;
  bottom: 0;  
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(127, 102, 102,1) 10%, 
     rgba(127, 102, 102, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}