47

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?

  enter image description here

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
xamenrax
  • 1,724
  • 3
  • 27
  • 47
  • 3
    What have you tried ? And I think you ment [opacity](https://developer.mozilla.org/en-US/docs/CSS/opacity), not shadow. – Vucko Jan 24 '13 at 11:26

3 Answers3

85

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>
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • you should make it fixed height to bottom. so 80% of text will stay selectable. – korywka Jan 24 '13 at 11:56
  • This won't work if you need to fade out text that is on top of a layer that has opacity (i.e., semi-transparent). – thdoan Nov 20 '15 at 06:36
16

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/

The Mechanic
  • 2,301
  • 1
  • 26
  • 37
  • This is a great little hack. According to CanIUse it works with 95% of users in the UK, and 91% worldwide. Not bad. – Chuck Le Butt Dec 03 '19 at 11:58
  • This works in Chrome, Safari, and Firefox. Not in IE11, if you require support for that still. One interesting note is I found that the order in which these are defined actually matter. Keep the background one above the others – jxn Oct 27 '21 at 16:34
4

You could also do this with the mask-image property, though you may need to add the -webkit- prefix.

article {
  -webkit-mask-image: linear-gradient(0deg, transparent 16px, red 66px);
  /* 0deg = down, 90deg = left, 180deg = top, 270deg = right */
}
  <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>
dǝɥɔS ʇoıןןƎ
  • 1,674
  • 5
  • 19
  • 42