Toggle Sidebar B
AppearanceLight & dark mode D

Scroll Fade

A CSS utility that masks the edges of a scroll container, hinting at more content without overlays or scroll listeners. Scroll-driven where supported, with a static fallback. Ships in main.css.

Vertical

scroll-fade-b fades the bottom edge. Use scroll-fade-t for the top, or scroll-fade / scroll-fade-y for both.

Replay preview

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Horizontal

scroll-fade-x fades both inline edges; scroll-fade-s / scroll-fade-e (or -l / -r) fade a single side.

Replay preview
Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8Tag 9Tag 10Tag 11Tag 12

API Reference

Utility classes

PropTypeDefaultDescription
scroll-fadeutilityFades top and bottom edges (block axis).
scroll-fade-t / scroll-fade-butilityFade only the top, or only the bottom edge.
scroll-fade-xutilityFade both inline (left/right) edges.
scroll-fade-s / scroll-fade-eutilityFade only the start, or only the end inline edge (RTL-aware).
scroll-fade-b-<n>modifierOverride the fade size, e.g. scroll-fade-b-16 or scroll-fade-b-[12%].
scroll-fade-noneutilityDisable the mask (useful at a breakpoint).