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

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/

Answer 2

Try this example: http://jsbin.com/iwepas/3/ (tested on Firefox 18)

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 */
}

Output

---

---

Please note: on older browser you may need to use a from-transparent-to-opaque png background applied on the pseudoelement while other browser need vendor prefixes for linear-gradient