Fading text

by sach_a

HTML

<div class="text">
</br><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nesciunt voluptas voluptate provident optio veniam repellendus sunt, ipsa, sequi id voluptates, explicabo mlpa voluptatibus facilis qui. Fugiat id quae suscipit ex adipisci facilis deleniti dignissimos reiciendis, mollitia laudantium impedit non, atque iure molestiae quisquam similique commodi neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nesciunt voluptas voluptate provident optio veniam repellendus sunt, ipsa, sequi id voluptates, explicabo mlpa voluptatibus facilis qui. Fugiat id quae suscipit ex adipisci facilis deleniti dignissimos reiciendis, mollitia laudantium impedit non, atque iure molestiae quisquam similique commodi neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nesciunt voluptas voluptate provident optio veniam repellendus sunt, ipsa, sequi id voluptates, explicabo mlpa voluptatibus facilis qui. Fugiat id quae suscipit ex adipisci facilis deleniti dignissimos reiciendis, mollitia laudantium impedit non, atque iure molestiae quisquam similique commodi neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nesciunt voluptas voluptate provident optio veniam repellendus sunt, ipsa, sequi id voluptates, explicabo mlpa voluptatibus facilis qui. Fugiat id quae suscipit ex adipisci facilis deleniti dignissimos reiciendis, mollitia laudantium impedit non, atque iure molestiae quisquam similique commodi neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nesciunt voluptas voluptate provident optio veniam repellendus sunt, ipsa, sequi id voluptates, explicabo mlpa voluptatibus facilis qui. Fugiat id quae suscipit ex adipisci facilis deleniti dignissimos reiciendis, mollitia laudantium impedit non, atque iure molestiae quisquam similique commodi neque doloremque, dolores labore maiores !</p></br></br></br>
</div>
<div class="top-gradient"></div>
<div...

CSS

.text {
  max-width: 420px;
  margin: 0 auto;
  position: relative;
}
.top-gradient{
  position:fixed;
  top:0px;
  width: 100%;
  height: 50px;
  background: linear-gradient(white, transparent);
  pointer-events: none;
}
.bottom-gradient{
  position:fixed;
  bottom:0px;
  width: 100%;
  height: 100px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}