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

debugcn Published at Dev

thdoan

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>

thdoan

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

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-15

Comments

0 comments

From Dev

Related Related

Article