Examples

Scroll Shadow

ScrollShadow fades overflowing content at each scrollable edge using a pure CSS mask gradient — no scroll listeners, no layout thrashing.

Vertical list

Wrap a long list with a fixed height; the top and bottom edges fade as the user scrolls.

  • 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

Horizontal row

Set orientation to horizontal and constrain the width to fade the left and right edges.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12

Both orientations

Use orientation both to fade every scrollable edge — useful for pan-and-scan surfaces.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Custom fade size

Increase the size prop for thicker fade zones or set it to 0 to disable the mask entirely.

Row 1: the gradient fade is 40px tall on every scrollable edge.

Row 2: the gradient fade is 40px tall on every scrollable edge.

Row 3: the gradient fade is 40px tall on every scrollable edge.

Row 4: the gradient fade is 40px tall on every scrollable edge.

Row 5: the gradient fade is 40px tall on every scrollable edge.

Row 6: the gradient fade is 40px tall on every scrollable edge.

Row 7: the gradient fade is 40px tall on every scrollable edge.

Row 8: the gradient fade is 40px tall on every scrollable edge.

Row 9: the gradient fade is 40px tall on every scrollable edge.

Row 10: the gradient fade is 40px tall on every scrollable edge.

Row 11: the gradient fade is 40px tall on every scrollable edge.

Row 12: the gradient fade is 40px tall on every scrollable edge.

Row 13: the gradient fade is 40px tall on every scrollable edge.

Row 14: the gradient fade is 40px tall on every scrollable edge.

Row 15: the gradient fade is 40px tall on every scrollable edge.

Row 16: the gradient fade is 40px tall on every scrollable edge.

Row 17: the gradient fade is 40px tall on every scrollable edge.

Row 18: the gradient fade is 40px tall on every scrollable edge.