How to apply a CSS gradient over a text, from a transparent to an opaque colour

Question

Cheers!

I am a newbie in CSS/HTML, but I want to apply a gradient over a text, like that on the image below. How can I implement it with css?

---

 

Answer 1

The relevant CSS is on the pseudoelement :after of the <article> wrapper I used

article {   position: relative; }  article:after {   position: absolute;   bottom: 0;     height: 100%;   width: 100%;   content: "";   background: linear-gradient(to top,      rgba(255,255,255, 1) 20%,       rgba(255,255,255, 0) 80%   );   pointer-events: none; /* so the text is still selectable */ }

  <article>       <p>          Had you stepped on board the Pequod at a certain juncture           of this post-mortemizing of the whale; and had you strolled          forward nigh the windlass, pretty sure am I that you would          have scanned with no small curiosity a very strange, enigmatical           object, which you would have seen there, lying along lengthwise           in the lee scuppers. Had you stepped on board the Pequod at a certain           juncture of this post-mortemizing of the whale; and had you strolled          forward nigh the windlass, pretty sure am I that you would          have scanned with no small curiosity a very strange, enigmatical           object, which you would have seen there, lying along lengthwise           in the lee scuppers.       </p>   </article> 

Answer 2

CSS3 text gradients that is only supported by Webkit based browsers like Chrome and Safari. I have used 3 different methods. check this fiddle first http://jsfiddle.net/sarfarazdesigner/pvU7r/ Try this

.article{   background: -webkit-linear-gradient(#eee, #333);   -webkit-background-clip: text;   -webkit-text-fill-color: transparent; } 

this is working fine in chrome don't know how other browser react. Reference taken from http://css-tricks.com/snippets/css/gradient-text/