Pro

scroll-fade

PreviousNext

CSS utilities for Tailwind CSS that fade the edges of a scroll container.

The scroll-fade utilities apply CSS mask gradients to scrollable containers, fading content near the edges to show that there is more to scroll. They are CSS snippets that you add to your own stylesheet; they are not part of any Jolocky item.

Installation

Add the utilities to your global stylesheet (Tailwind CSS v4):

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

scroll-fade fades only the bottom edge; scroll-fade-y fades the top and bottom. Apply one to any container with vertical overflow:

<div className="scroll-fade-y max-h-80 overflow-y-auto p-4">
  <ul className="space-y-3">
    <li>Entry 1</li>
    <li>Entry 2</li>
    <li>Entry 3</li>
    <li>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 fades the content itself instead of painting an overlay color, so whatever is behind the container (a gradient, an image, a blurred panel) shows through.