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.
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.
🐛 Still needs some love for Safari though … not 100% perfect in there /// working on it!
Hope you like it 🙂
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!