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(#856bc6 33%, rgba(133,107,198, 0)),
linear-gradient(rgba(133,107,198, 0), #856bc6 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: #856bc6;
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+.