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);
}