bx

scroll-fade

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24
  • Item 25
  • Item 26
  • Item 27
  • Item 28
  • Item 29
  • Item 30
  • Item 31
  • Item 32
  • Item 33
  • Item 34
  • Item 35
  • Item 36
  • Item 37
  • Item 38
  • Item 39
  • Item 40
tsx

scroll-fade masks the content at the edges of a scrollable container with a mask-image driven by a scroll-driven animation (no JS, no scroll listener).

At rest, the edge opposite the scroll direction is sharp and the next edge fades. While scrolling, both edges fade. At the end, the edge you arrive at turns sharp again to signal "nothing more after this".

Apply scroll-fade (or scroll-fade-y) to the container that has overflow-y-auto. For horizontal scrolling, use scroll-fade-x. Combine it with ScrollArea.

Usage

ClassStyles
scroll-fade mask-image top + bottom, animation-timeline: scroll(self y)
scroll-fade-y Alias of scroll-fade, for an explicit vertical fade.
scroll-fade-x mask-image left + right (mirrored in RTL), animation-timeline: scroll(self inline)
scroll-fade-t Fade on the top edge only.
scroll-fade-b Fade on the bottom edge only.
scroll-fade-l Fade on the left edge (physical).
scroll-fade-r Fade on the right edge (physical).
scroll-fade-none Disables the fade. Useful as a responsive variant: md:scroll-fade-none.
--scroll-fade-size Depth of the fade (default: min(12%, 40px)). Set it with style="--scroll-fade-size: 24px".
--scroll-fade-reveal Scroll distance over which the fade appears/disappears (default: 96px).

No Overflow, No Fade

If the content does not overflow, no fade is shown. You can apply scroll-fade to any list without first checking whether it scrolls.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Horizontal Scrolling

Use scroll-fade-x on containers that scroll horizontally (overflow-x-auto). The horizontal fade follows the reading direction: in RTL, the sharp edge and the faded edge swap automatically.

Chip 1Chip 2Chip 3Chip 4Chip 5Chip 6Chip 7Chip 8Chip 9Chip 10Chip 11Chip 12Chip 13Chip 14Chip 15Chip 16Chip 17Chip 18Chip 19Chip 20Chip 21Chip 22Chip 23Chip 24
tsx 
<div tabIndex={0} className="scroll-fade-x flex overflow-x-auto">…</div>

Edge Fades

Use the edge utilities when a single edge should follow the scroll position. The start edge appears as you move away from the start, the end edge disappears when you reach the end.

scroll-fade-b

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20

scroll-fade-t

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
tsx 
<div tabIndex={0} className="scroll-fade-b overflow-y-auto">…</div>

Fade Size

The default depth is 12% of the container, capped at 40px. Set --scroll-fade-size for a fixed value.

Default

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20

--scroll-fade-size: 80px

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
tsx 
<div tabIndex={0} className="scroll-fade overflow-y-auto" style={{ "--scroll-fade-size": "80px" } as any}>…</div>

Disabling the Fade

scroll-fade-none removes the fade. Useful as a responsive variant: scroll-fade md:scroll-fade-none.

tsx 
<div tabIndex={0} className="scroll-fade md:scroll-fade-none overflow-y-auto">…</div>

Fallback

The scroll-aware behavior relies on CSS scroll-driven animations, supported natively in Chrome 115+ and Edge 115+. In browsers without support (Safari, current Firefox), scroll-fade falls back to a static fade on both edges; the edge utilities fall back to a static fade on the targeted edge only.

RTL

scroll-fade-x follows the reading direction. In RTL the right edge is sharp at rest and the fade is on the left, mirroring LTR, with no extra class.

Chip 1Chip 2Chip 3Chip 4Chip 5Chip 6Chip 7Chip 8Chip 9Chip 10Chip 11Chip 12Chip 13Chip 14Chip 15Chip 16Chip 17Chip 18Chip 19Chip 20Chip 21Chip 22Chip 23Chip 24