Fade text

Here is my very first (and most popular) pen:

See the Pen Fade text by Teo Dragovic (@teodragovic) on CodePen.

I’m using pseudo-element to apply a color-to-transparent gradient on the bottom of the page to get a nice little fading text effect.

The trick is still solid. In fact, I decided to add it to this blog!

.post:after {
content: "";
position: fixed;
width: 100%;
height: 80px;
left: 0;
bottom: 0;
// Allow text behind fade to be selectable
pointer-events: none;
// Make sure actual color matches page background
background: linear-gradient(transparent, white);