Pro

scroll-fade

PreviousNext

Utilities for adding a smooth fade mask to the edges of a scroll container.

The scroll-fade utility applies CSS mask gradients to scrollable containers, subtly dissolving text or list items near the edges to visually indicate overflow.

Installation

Add the scroll mask definition to your global CSS stylesheet:

app/globals.css
@utility scroll-fade {
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
 
@utility scroll-fade-y {
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
 
@utility scroll-fade-x {
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

Usage

Apply scroll-fade or scroll-fade-y to any container with overflow:

<div className="scroll-fade-y max-h-80 overflow-y-auto p-4">
  <ul className="space-y-3">
    <li>Editorial entry 1</li>
    <li>Editorial entry 2</li>
    <li>Editorial entry 3</li>
    <li>Editorial entry 4</li>
  </ul>
</div>

Horizontal Scrolling Containers

For horizontal scroll rows, such as carousel galleries or tag filters, use scroll-fade-x:

<div className="scroll-fade-x flex overflow-x-auto gap-4 py-2">
  <div className="shrink-0 w-48 h-32 rounded-lg bg-card border border-border" />
  <div className="shrink-0 w-48 h-32 rounded-lg bg-card border border-border" />
  <div className="shrink-0 w-48 h-32 rounded-lg bg-card border border-border" />
</div>

The mask dissolves the actual content rather than painting an overlay color, ensuring that backgrounds, blurred glass panels, and gradients behind the container shine through naturally.