CSS scroll shadow (useful for tables)

.scroll-shadow-inline {
  --shadow-color: rgb(0 0 0 / .2);
  --shadow-size: 8px;
  --shadow-spread: calc(var(--shadow-size) * -.5);

  overflow-x: auto;
  animation: scroll-shadow-inset linear;
  scroll-timeline: --scroll-shadow-timeline inline;
  animation-timeline: --scroll-shadow-timeline;
}

@keyframes scroll-shadow-inset {
  from {
    box-shadow:
    inset calc(var(--shadow-size) * -2) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color),
    inset calc(var(--shadow-size) * 0) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color);
  }
  10%, 90% {
    box-shadow:
    inset calc(var(--shadow-size) * -1) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color),
    inset calc(var(--shadow-size) * 1) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color);
  }
  to {
    box-shadow:
    inset calc(var(--shadow-size) * 0) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color),
    inset calc(var(--shadow-size) * 2) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color);
  }
}