Overview
Shadows
Six shadow levels, a hairline ring, and a fade for scrolling edges.
Principles
Build each level from two layers. Every level is a close shadow and a wide one, drawn from one color and one strength.
Set color and strength once. --reuse-shadow-color and --reuse-shadow-strength drive all six levels, and a dark ancestor raises the strength and lightens the ring.
Use a ring, not a border. The ring variants add a hairline in the shadow itself, so the element's size never changes.
Work without JavaScript. The levels and cards are plain classes in one stylesheet.
Fade only where there is more. The fade edge masks a side only while there is content left to scroll toward it, and it follows right-to-left layouts.
Put the inline style back. Destroy restores the scroller's original inline style exactly.