Scroll Fade
Fade the edges of a scrollable container to hint at overflowing content.
Ships with the spark styles (utilities.css), so there is no install step. The fade is
driven by CSS scroll-driven animations: edges only fade while there is more
content to scroll in that direction.
The mask fades everything the element paints, including its own border, so
put borders and backgrounds on a wrapper and the scroll-fade class on the
inner scroll container.
Usage
| Class | Effect |
|---|---|
scroll-fade / scroll-fade-y | fade top + bottom of a vertical scroller |
scroll-fade-x | fade both inline edges of a horizontal scroller |
scroll-fade-t / scroll-fade-b | single edge, top / bottom |
scroll-fade-l / scroll-fade-r | single edge, left / right (physical) |
scroll-fade-s / scroll-fade-e | single edge, inline start / end (RTL-aware) |
scroll-fade-<n> / scroll-fade-[2rem] | fade size (spacing scale / arbitrary) |
scroll-fade-t-<n> … scroll-fade-e-<n> | per-edge fade size |
scroll-fade-none | disable (e.g. md:scroll-fade-none) |
no-scrollbar (also in utilities.css) hides the native scrollbar when the
fade alone should hint at overflow.
Examples
Horizontal
Single edge + fade size
Fade only the bottom, sized via the spacing scale (scroll-fade-b-16).
Fallback
Where animation-timeline: scroll() is unsupported, the fade is static
(edges stay faded regardless of scroll position), so content is never hidden
without a hint.