I was making a webpage and wanted to make bottom of a text fade, which is a small portion of a long text. It should indicate perfectly that there is more text as if saying “click to read more.”

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui nunc, tempus vel ullamcorper ac, aliquet iaculis purus. Donec fermentum ipsum nec odio convallis et venenatis felis bibendum. Proin sed quam massa. Ut nibh mauris, tempor eget suscipit nec, tempus ac lectus. Proin sed augue ante, in fringilla nunc. Proin adipiscing orci molestie mi vehicula viverra. Aliquam erat volutpat. Proin tortor leo, tempor quis luctus vitae, pharetra non quam. Mauris et nisl sit amet arcu pharetra tempus in vel enim. Vestibulum lacinia porttitor sodales.
<style>
.fade-text-container {
  color: #aaa;
  background-color: #333;
  border-radius: 0.5em;
  padding: 0.5em;
}

.fade-text-container,
.text-container {
  line-height: 1.5em;
  width: 320px;
  /* 10 lines => 1.5em * 10 = 15em ***/
  height: 15em;
  overflow: hidden;
}

.fadeout {
  position: relative;
  /* 3 lines => 1.5em * 3 = 4.5em ***/
  height: 4.5em;
  top: -4.5em;
  background: -webkit-linear-gradient(
    rgba(51, 51, 51, 0) 0%,
    rgba(51, 51, 51, 1) 100%
    );
  background: -moz-linear-gradient(
    rgba(51, 51, 51, 0) 0%,
    rgba(51, 51, 51, 1) 100%
    );
  background: linear-gradient(
    rgba(51, 51, 51, 0) 0%,
    rgba(51, 51, 51, 1) 100%
    );
  z-index: 1;
}
</style>

<div class="fade-text-container">
  <div class="text-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui nunc, tempus vel ullamcorper ac, aliquet iaculis purus. Donec fermentum ipsum nec odio convallis et venenatis felis bibendum. Proin sed quam massa. Ut nibh mauris, tempor eget suscipit nec, tempus ac lectus. Proin sed augue ante, in fringilla nunc. Proin adipiscing orci molestie mi vehicula viverra. Aliquam erat volutpat. Proin tortor leo, tempor quis luctus vitae, pharetra non quam. Mauris et nisl sit amet arcu pharetra tempus in vel enim. Vestibulum lacinia porttitor sodales.</div>
  <div class="fadeout"></div>
</div>

It’s two-level container, top one .fade-text-container contains the text .text-container and the fadeout effect .fadeout. Because the need of calculating the position of .fadeout, so I made two-level and so .fadeout can be placed at exactly at bottom of text. Using this method, I can set how many exactly lines I want to fade out.

There is one issue I am aware of, because .fadeout is on top of text, therefore the text under it can not be selected. It shouldn’t be a big issue, because normally you want visitor actually to click and to go to another page. You can set up a click event on .fade-text-container and redirect user to other page.

This method only works with background is solid color.