A long time ago (2012!), Lea Verou shared a way on how to add scrolling shadows to containers that needs scrolling. Using those shadows in a scroll container is a great UX thing, as they visually tell the user that the content is scrollable.
🐛🍏 The technique doesn’t play that nice on iOS though, due to lacking
Her code however, only worked with containers that scroll vertically. Based upon Lea’s code I created a version that also plays nice with horizontal scroll containers.
Whilst I was at it, I also introduced CSS Custom Properties, as they allow easy theming. Using the “CSS Variables”
--shadow-size you can configure the result.
Hope you like it 🙂
Thank me with a coffee.
I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!