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: 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.

1<div className="scroll-fade-t h-44 overflow-y-auto">{/* tall content */}</div>2<div className="scroll-fade-b h-44 overflow-y-auto">{/* tall content */}</div>3<div className="scroll-fade-l overflow-x-auto">{/* wide content */}</div>4<div className="scroll-fade-r overflow-x-auto">{/* wide content */}</div>

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.
• The mask fades everything the element paints, border and background included. If the scroll container sits inside a visible card, keep the border, background, and rounded-* on a wrapper element (plus overflow-hidden to clip the corners) and apply the fade utility to an inner scroll container, as the examples on this page do:

1<div className="overflow-hidden rounded-lg border border-card bg-card">⋯2	<div className="scroll-fade-y h-56 overflow-y-auto">{/* tall content */}</div>3</div>