Scroll Fade

Edge-fade utilities for scroll containers. They mask the edge of an overflowing container so content gently fades out where there is more to scroll, and render cleanly once you reach that edge (or when there is no overflow at all).

The fade is driven entirely by a CSS scroll-driven animation — there is no scroll listener, ResizeObserver, or JavaScript involved. Apply the utility directly to the scroll container itself (the element with overflow-*-auto).

Both edges

Vertical — scroll-fade-y

Fades the top and bottom edges of a vertically scrolling container. Scroll the list to see each edge fade in and out.

1<div className="scroll-fade-y h-56 overflow-y-auto">{/* tall content */}</div>

Horizontal — scroll-fade-x

Fades the left and right edges of a horizontally scrolling container.

1<div className="scroll-fade-x w-72 overflow-x-auto">{/* wide content */}</div>

Single edge

When only one edge should fade — for example a sidebar that fades content scrolling under a sticky header but stays flush at the bottom — use a single-edge utility. The opposite edge always stays fully opaque.

Use them exactly like the axis utilities — just put the edge class on the scroll container. The sidebar example above becomes:

1<nav className="scroll-fade-t h-full overflow-y-auto">{/* tall content */}</nav>

Each box below is pre-scrolled to its midpoint so the single faded edge stands out against the flush opposite edge.

Requirements

• Apply the utility to the scroll container itself — the element that has overflow-x-auto / overflow-y-auto. The fade follows that element's own scroll position.
• The utility uses mask-image, so it composes with the element's background and content but cannot be combined with a different mask-image on the same element.