ScrollFade

Wraps a scrollable region and overlays a gradient fade at the edges where content is clipped — the start fade appears once you've scrolled past the edge, and the end fade hides once you reach the end. The fade signals “there's more here” without a visible scrollbar. Reach for it on bounded lists, menus, and panels where content can overflow silently; use ScrollArea instead when you want a styled scrollbar as the affordance, and skip both when content always fits. Set direction to match the overflow axis, and surface to the parent's background color so the fade reads as the surface swallowing content. size is the fade depth in px — the 24px default suits most lists; go larger for a softer falloff on tall regions, smaller for dense or inline strips.