<div class="box">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis minus qui et dolores optio? Architecto delectus enim, saepe earum doloremque sunt laborum ut nulla adipisci nam minus fugiat nihil ab voluptatum quos aliquam ipsa eveniet, molestias illo distinctio eum fugit minima magnam odit. Voluptas nulla consectetur maxime soluta illo accusamus non tempore quibusdam voluptate odio, reiciendis, sunt quos iusto sit ex nisi doloribus aut distinctio sequi! Temporibus quae quisquam nostrum similique, necessitatibus, maxime soluta officiis est iure alias fugit id. Culpa dolorem eaque fuga commodi doloribus ea, praesentium, suscipit perferendis corporis cum eos labore? Aspernatur eaque voluptatum beatae illo quibusdam!
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis minus qui et dolores optio? Architecto delectus enim, saepe earum doloremque sunt laborum ut nulla adipisci nam minus fugiat nihil ab voluptatum quos aliquam ipsa eveniet, molestias illo distinctio eum fugit minima magnam odit. Voluptas nulla consectetur maxime soluta illo accusamus non tempore quibusdam voluptate odio, reiciendis, sunt quos iusto sit ex nisi doloribus aut distinctio sequi! Temporibus quae quisquam nostrum similique, necessitatibus, maxime soluta officiis est iure alias fugit id. Culpa dolorem eaque fuga commodi doloribus ea, praesentium, suscipit perferendis corporis cum eos labore? Aspernatur eaque voluptatum beatae illo quibusdam!
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis minus qui et dolores optio? Architecto delectus enim, saepe earum doloremque sunt laborum ut nulla adipisci nam minus fugiat nihil ab voluptatum quos aliquam ipsa eveniet, molestias illo distinctio eum fugit minima magnam odit. Voluptas nulla consectetur maxime soluta illo accusamus non tempore quibusdam voluptate odio, reiciendis, sunt quos iusto sit ex nisi doloribus aut distinctio sequi! Temporibus quae quisquam nostrum similique, necessitatibus, maxime soluta officiis est iure alias fugit id. Culpa dolorem eaque fuga commodi doloribus ea, praesentium, suscipit perferendis corporis cum eos labore? Aspernatur eaque voluptatum beatae illo quibusdam!
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis minus qui et dolores optio? Architecto delectus enim, saepe earum doloremque sunt laborum ut nulla adipisci nam minus fugiat nihil ab voluptatum quos aliquam ipsa eveniet, molestias illo distinctio eum fugit minima magnam odit. Voluptas nulla consectetur maxime soluta illo accusamus non tempore quibusdam voluptate odio, reiciendis, sunt quos iusto sit ex nisi doloribus aut distinctio sequi! Temporibus quae quisquam nostrum similique, necessitatibus, maxime soluta officiis est iure alias fugit id. Culpa dolorem eaque fuga commodi doloribus ea, praesentium, suscipit perferendis corporis cum eos labore? Aspernatur eaque voluptatum beatae illo quibusdam!
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis minus qui et dolores optio? Architecto delectus enim, saepe earum doloremque sunt laborum ut nulla adipisci nam minus fugiat nihil ab voluptatum quos aliquam ipsa eveniet, molestias illo distinctio eum fugit minima magnam odit. Voluptas nulla consectetur maxime soluta illo accusamus non tempore quibusdam voluptate odio, reiciendis, sunt quos iusto sit ex nisi doloribus aut distinctio sequi! Temporibus quae quisquam nostrum similique, necessitatibus, maxime soluta officiis est iure alias fugit id. Culpa dolorem eaque fuga commodi doloribus ea, praesentium, suscipit perferendis corporis cum eos labore? Aspernatur eaque voluptatum beatae illo quibusdam! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis minus qui et dolores optio? Architecto delectus enim, saepe earum doloremque sunt laborum ut nulla adipisci nam minus fugiat nihil ab voluptatum quos aliquam ipsa eveniet, molestias illo distinctio eum fugit minima magnam odit. Voluptas nulla consectetur maxime soluta illo accusamus non tempore quibusdam voluptate odio, reiciendis, sunt quos iusto sit ex nisi doloribus aut distinctio sequi! Temporibus quae quisquam nostrum similique, necessitatibus, maxime soluta officiis est iure alias fugit id. Culpa dolorem eaque fuga commodi doloribus ea, praesentium, suscipit perferendis corporis cum eos labore? Aspernatur eaque voluptatum beatae illo quibusdam!
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  height: 100vh;

}

body:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -10;
  opacity: 0.2;
    background-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  background-size: 20%;
}

.box {
  background-color: #fff;
  width: 300px;
  height: 70vh;
  overflow-y: auto;
  -webkit-mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgb(0, 0, 0) 50px,
    rgb(0, 0, 0) calc(100% - 50px),
    rgba(0, 0, 0, 0) 100%
  );
}