3

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
  • 15,024
  • 1
  • 46
  • 40
  • So you want to place 3 DIVs, One which has text, Second which is brown colored and semi-transparent, third is the black one (which is also transparent), is it right ? – Pirate X Nov 20 '15 at 06:59
  • @PirateX I would like the text in the code snippet to fade into the same color as the semi-transparent box. – thdoan Nov 20 '15 at 07:09
  • I amended my answer to an example I found that demonstrates what I think you're asking. – Knight Yoshi Nov 20 '15 at 07:11

3 Answers3

3

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.

Community
  • 1
  • 1
thdoan
  • 15,024
  • 1
  • 46
  • 40
  • I got a 404 while trying to go to your "CSS Masks" link. Could you update it? – Frank Tan Oct 26 '16 at 20:48
  • 1
    @FrankTan Luckily I clipped the page before it went dark: https://www.evernote.com/shard/s64/sh/2ac7db64-4e50-460e-b5ee-62da77bbb150/c2a8dd92fb525c11871b86b6f990d6dc – thdoan Oct 28 '16 at 01:55
1

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 */
}
Knight Yoshi
  • 858
  • 1
  • 11
  • 28
  • Hi Knight Yoshi, `color: rgba(255, 255, 255, .5);` doesn't fade out the text in a vertical gradient. – thdoan Nov 20 '15 at 07:12
  • Yeah, I re-read what you were asking for and amended the answer with an example of what I think you're asking for. I'll add the code from the example. – Knight Yoshi Nov 20 '15 at 07:17
  • Thanks for the quick answer. It works using the sample code, but it breaks as soon as you change the div's opacity value (see http://codepen.io/thdoan/pen/wKZBrN). I'll need to clarify my question once again: text should fade into the background color regardless of the div's opacity value. Since you technically answered the original question as it was first written, I'll accept your answer if no one can come up with a solution that works with any opacity value. – thdoan Nov 20 '15 at 07:29
  • If you add it to the .box class it'll fade more elegantly. I'm not sure if that'll blend it better for what you're asking or not. http://codepen.io/anon/pen/gaybeB The biggest thing though is that it need/should match the background color of the element it's overlapping. – Knight Yoshi Nov 20 '15 at 07:37
  • 1
    Knight Yoshi, your codepen comes closer to achieving what I want, but the only problem is it also changes the background color of the box, which I don't want. – thdoan Nov 20 '15 at 09:03
1

you can play with mix-blen-mode and background Gradient here what i came for text gradient DEMO

UPDATE
i have place white-transparent gradient over the p to fade the down portion of text NEW DEMO

body {
  background: #333;
  color: #fff;
  font-size: 22px;
}
.box {
  width: 520px;
  height:210px;
  border: 2px solid #000;
  padding: 1rem;
  background: rgba(204, 153, 153, 0.5);
  margin: 0px;
  padding: 0px;
}
p {
  color: rgb(255, 255, 255);
  margin: 0px;
  padding: 0px;
}
p::before {
  content: "";
  width: 520px;
  height: 210px;
  position: absolute;
  background: rgba(204, 153, 153, 0.5) linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(150, 120, 120, 0.82) 90%) repeat scroll 0% 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>
CY5
  • 1,489
  • 15
  • 21
  • This also affects the font color, which I don't want. The font color should remain white; the only thing that should change is the text's opacity as it fades and blends with the div. – thdoan Nov 20 '15 at 08:47
  • @10basetom i have updated my answer color is white but it fade at bottom – CY5 Nov 20 '15 at 09:34