html - 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>