javascrip,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.gradient {
width: 500px;
}
.gradient:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1) 50%);
}
</style>
</head>
<body>
<div class="gradient"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nesciunt, quo, maxime, sunt voluptatibus quaerat soluta mollitia esse ipsa eos iusto odit consectetur? Soluta, provident, quod facere animi ut quos.</div>
<div>Voluptatibus, distinctio, sequi, eaque nostrum dicta numquam blanditiis placeat amet labore mollitia temporibus eligendi nobis. Repellat, pariatur, neque, quidem dolore sequi repellendus veritatis voluptas molestiae fuga temporibus tempora eveniet suscipit.</div>
<div>Veniam, rem fugit debitis modi sit beatae perspiciatis consequatur dignissimos ullam vel! Quaerat, ut, deserunt in quasi earum vel perspiciatis sapiente! Ad, consectetur id ex officiis aliquam asperiores at praesentium.</div>
<div>Magni, expedita, qui, nam voluptates ex consectetur ab soluta fuga odit dolor possimus praesentium corporis vel earum repellendus asperiores reprehenderit! Natus mollitia ad unde accusantium ipsa incidunt dicta omnis! Earum.</div>
<div>Commodi, reprehenderit, fugiat ullam in eius unde modi asperiores consectetur et voluptatum quo officiis magnam eum fuga quaerat vel fugit reiciendis nulla impedit aliquam architecto soluta maxime nesciunt distinctio deserunt.</div></div>
</body>
</html>