CSS code snippets for scroll hint on overflow

Keeping this for reference.

Kudos to Lea Verou: Pure CSS scrolling shadows with background-attachment: local (article is from 2012, my dear…). Horizontally applied by Chen Hui Jing, Codepen: Table #3: Style the scroll (basic). Found via and there with fixes for accessibility: Adrian Roselli: Under-Engineered Responsive Tables.

CSS for vertical scroll hint

  overflow-y: auto;
  background:
    /* Shadow Cover TOP */
    linear-gradient(
      $color-white 30%,
      rgba(255, 255, 255, 0)
    ) center top,

        /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0),
      $color-white 70%
    ) center bottom,

        /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,

        /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;

  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;

CSS for horizontal scroll hint

  overflow: auto;
  background: 
    linear-gradient(
      to right, 
      $color-white 30%, 
      rgba(255, 255, 255, 0)),
    linear-gradient(
      to right, 
      rgba(255, 255, 255, 0), 
      $color-white 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)),
    radial-gradient(
      farthest-side at 100% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: $color;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;