<div>
  <div class="container">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum possimus quam optio qui laboriosam officiis doloremque ipsum, eaque, repellat eligendi, id ut. Optio voluptatibus quaerat exercitationem, ipsa doloribus voluptas sunt?
    </p>
    <p>
      Similique voluptates nesciunt quae architecto. Sed suscipit eius ipsum nostrum sint non unde dolorum ab eaque sunt numquam iste, nesciunt quos dolores laudantium corporis, placeat officiis aspernatur alias. Praesentium, quibusdam?
    </p>
    <p>
      Aliquid fugit dolor reiciendis rem aut debitis incidunt? Blanditiis, eum inventore facilis quasi perspiciatis eligendi beatae qui sapiente quo voluptas, non magni excepturi nesciunt officiis numquam accusamus maiores amet soluta!
    </p>
    <p>
      Ad nulla vero hic officia, expedita repudiandae totam rerum eligendi dolore quas ipsum! Repudiandae doloremque, iure quos impedit facere error reprehenderit numquam deleniti nam! Dolore aut numquam labore quia dolorum.
    </p>
    <p>
      Quasi suscipit vero tenetur hic beatae fuga architecto blanditiis atque! Accusantium, eveniet porro! Esse amet aspernatur maiores, in quaerat vitae? Et officiis, voluptates ut magni qui dolorum in ipsum dolore.
    </p>
    <p>
      Aperiam soluta quos illo veniam praesentium rem rerum cupiditate similique assumenda sit vitae animi dolorum iure a, consectetur cum optio, tenetur id reiciendis quod hic, accusamus ullam! Eligendi, unde ipsa.
    </p>
    <p>
      Voluptas magnam eveniet nobis qui quidem a quas voluptates. Mollitia eveniet corrupti quos repellat modi suscipit. Delectus corporis quidem, nobis sunt omnis vitae recusandae sed eos quasi ratione expedita beatae.
    </p>
    <p>
      Debitis, nam, saepe nihil corrupti voluptas vero maxime animi cupiditate, quis eligendi adipisci a reprehenderit esse neque sunt fugiat accusantium quod optio quaerat voluptatum. Fugit eos vel omnis nihil non.
    </p>
    <p>
      Ducimus adipisci distinctio dolor aliquam illum perspiciatis illo iure minus expedita similique? Maxime repellendus sequi ducimus, recusandae fugit atque commodi, odio corrupti velit, itaque temporibus dicta? Nobis quibusdam esse veniam.
    </p>
    <p>
      Ex animi iure magnam a aliquam perferendis recusandae eos, velit veritatis adipisci hic laborum esse temporibus quibusdam. Aliquid illo, dignissimos, pariatur libero tempore est eius recusandae dolor, ipsum voluptate repellendus!
    </p>
  </div>
</div>
:root {
  --fadeHeight: 5em;
}

.container {
  mask-image: 
    linear-gradient(
      to top,
      transparent,
      transparent var(--fadeHeight),
      black var(--fadeHeight),
      black calc(100% - var(--fadeHeight)),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      transparent var(--fadeHeight),
      black var(--fadeHeight),
      black calc(100% - var(--fadeHeight)),
      transparent
    );
}
































html {
  color: white;
  font-family: arial, sans-serif;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

/* Firefox only */
body *:not(app-root > *) {
  scrollbar-color: rgba(255, 255, 255, 0.2)) transparent;
  scrollbar-width: thin;
}

/* All other browsers */
body *:not(app-root > *)::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

body *:not(app-root > *)::-webkit-scrollbar,
body *:not(app-root > *)::-webkit-scrollbar-track {
  background-color: transparent;
}

body *:not(app-root > *)::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

body > div {
  height: 100%;
  background-color: #26004d;
  background-image:
    radial-gradient(at 87% 88%, hsla(62, 94%, 50%, 1) 0, hsla(62, 94%, 50%, 0) 50%),
    radial-gradient(at 28% 4%, hsla(118, 95%, 61%, 1) 0, hsla(118, 95%, 61%, 0) 50%),
    radial-gradient(at 50% 6%, hsla(59, 89%, 56%, 1) 0, hsla(59, 89%, 56%, 0) 50%),
    radial-gradient(at 23% 61%, hsla(25, 93%, 67%, 1) 0, hsla(25, 93%, 67%, 0) 50%),
    radial-gradient(at 34% 23%, hsla(157, 89%, 54%, 1) 0, hsla(157, 89%, 54%, 0) 50%),
    radial-gradient(at 95% 78%, hsla(46, 86%, 57%, 1) 0, hsla(46, 86%, 57%, 0) 50%),
    radial-gradient(at 71% 7%, hsla(187, 88%, 56%, 1) 0, hsla(187, 88%, 56%, 0) 50%);
  display: grid;
  place-items: center;
}

.container {
  width: 50%;
  height: 50%;
  overflow-y: scroll;
  padding-block: var(--fadeHeight);
  padding-right: 1em;
}

p {
  font-size: 1.125em;
  line-height: 1.5;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.