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>