JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
Content to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledContent to be scrolledv
  </div>
</div>

CSS

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  width: 300px;
  height: 25px;
  background: linear-gradient(white, rgba(255, 255, 255, 0.001)); /* transparent keyword is broken in Safari */
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 25px;
  background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 300px;
  height: 150px;
  padding: 15px 0;
  line-height: 1.2;
  text-align: center;
}