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