<div class="element">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, qui, harum, assumenda, iure amet fugit explicabo enim deserunt incidunt voluptates repellat temporibus doloribus distinctio pariatur iusto eveniet facere quisquam repudiandae!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, quam, eos veniam illo porro vero numquam blanditiis obcaecati neque recusandae aspernatur quos repellendus ea. Porro temporibus culpa tempora harum itaque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, qui, fugit temporibus perferendis sed asperiores tenetur repudiandae adipisci voluptatem aliquid blanditiis consectetur corrupti molestias quam voluptas officiis quos quo! Facilis!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, ab, vitae eveniet amet tempora perspiciatis libero repellendus cupiditate saepe rem! Dolor, labore mollitia vero consequuntur facere ea cumque quis accusamus!
</p>
</div>
body {
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
p {
padding: 1em;
color: white;
}
.element {
margin: 20px auto;
max-width: 640px;
height: 400px;
margin: 30px auto;
overflow-y: scroll;
background: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/field.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}