{"id":305914,"date":"2020-03-30T08:35:54","date_gmt":"2020-03-30T15:35:54","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=chapters&p=305914"},"modified":"2021-10-06T07:40:53","modified_gmt":"2021-10-06T14:40:53","slug":"scroll-shadows","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/scroll-shadows\/","title":{"rendered":"Scroll Shadows"},"content":{"rendered":"\n

The idea of scroll shadows makes an absolute ton of sense. When a container is scrolled down, you can see a shadow at the top, which makes it clear you can scroll back up. And if it’s possible to scroll down, there is a shadow down there also, unless you’ve scrolled down all the way. <\/p>\n\n\n\n

This might just be my favorite CSS trick of all time. The idea comes by way of Roman Komarov, but then Lea Verou came up with the extra fancy CSS trickery and popularized it<\/a>. <\/p>\n\n\n\n

Scroll shadows are such nice UX, it almost makes you wonder why it’s not a native browser feature, or at least easier to pull off in CSS. You could call them an affordance<\/em>, an obvious visual cue that scrolling is either possible or complete, that doesn’t require any learning. <\/p>\n\n\n\n

\n

Here’s a working example:<\/p>\n\n\n\n