How to apply a CSS gradient over a text, from a transparent to an opaque colour
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> 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/