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(#1ad813 33%, rgba(26,216,19, 0)), linear-gradient(rgba(26,216,19, 0), #1ad813 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: #1ad813; 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+.