CSS Scroll Shadows!

Adjust the controls (👇) and see the CSS scroll shadows change

Background colorShadow colorShadow size

Scroll down and watch the CSS scroll shadows disappear/appear...

.scrollGradient {
  background: 
    linear-gradient(#c3e589 33%, rgba(195,229,137, 0)),
    linear-gradient(rgba(195,229,137, 0), #c3e589 66%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(34,34,34, 0.5), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(34,34,34, 0.5), rgba(0,0,0,0)) 0 100%;
  background-color: #c3e589;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px;
}

If you want to learn how this works check this article by Lea Verou.

Watch out! As Felix Leupold pointed out, the CSS above doesn't work in latest Mobile Safari anymore.