CSS Scroll Shadows!
Adjust the controls (👇) and see the CSS scroll shadows change
Scroll down and watch the CSS scroll shadows disappear/appear...
.scrollGradient {
background:
linear-gradient(#2e7daa 33%, rgba(46,125,170, 0)),
linear-gradient(rgba(46,125,170, 0), #2e7daa 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: #2e7daa;
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 for some iOS versions! background-attachment: local
didn't work on IOS 13 and
14 but has been fixed and works again on iOS 15+.