Andrew's Digital Garden

Scroll shadows

Scroll shadows are small inset shadows on elements that offer a visual hint letting the user know they can scroll in that direction.

Although they can be acoomplished with only CSS, they are somewhat lacking in browser support and flexibility, as you need to have knowledge of the background colour.

Instead this can be accomplished using JS, applying the shadow looking at scroll and resize events. It's helpful to use mask-image, as it applies a fade to the text regardless of background colour.

mask-image: linear-gradient(to right, black calc(100% - 80px), transparent);

https://css-tricks.com/scroll-shadows-with-javascript/

[[css]] [[design]]

Scroll shadows