Aspekt logoAspekt UI

Scroll Fade adds edge fades to scroll containers with CSS masks.

Install once

Scroll Fade ships in the Aspekt theme block. Run init once, then add the utility classes to any scroll container.

terminalbash
pnpm dlx @aspekt/ui init

Vertical scroll

Use scroll-fade or scroll-fade-y on the element that owns vertical overflow. The mask reveals and clears as the container reaches each edge.

Inbox triage
Customer handoff
Launch notes
Billing review
Research summary
Design QA
Metrics follow-up
Security check
Roadmap sync
Release prep

scroll-fade

Inbox triage
Customer handoff
Launch notes
Billing review
Research summary
Design QA
Metrics follow-up
Security check
Roadmap sync
Release prep

scroll-fade scroll-fade-24

scroll-list.tsxtsx
<div className="h-72 overflow-y-auto scroll-fade">  {items.map((item) => (    <div key={item}>{item}</div>  ))}</div>

Horizontal and edge fades

Use scroll-fade-x for horizontal overflow. Use edge classes when only one side should fade.

Design
Engineering
Marketing
Product
Research
Sales
Support
Operations
Finance
Legal

scroll-fade-x

Inbox triage
Customer handoff
Launch notes
Billing review
Research summary
Design QA
Metrics follow-up

scroll-fade-b

scroll-fade-edges.tsxtsx
<div className="overflow-x-auto scroll-fade-x">  {tags.map((tag) => (    <div key={tag}>{tag}</div>  ))}</div> <div className="h-48 overflow-y-auto scroll-fade-b">  ...</div>

Reference

  • scroll-fade, scroll-fade-y, and scroll-fade-x cover both edges on an axis.
  • scroll-fade-t, scroll-fade-r, scroll-fade-b, and scroll-fade-l target physical edges.
  • scroll-fade-s and scroll-fade-e target logical inline start and end, including RTL layouts.
  • scroll-fade-24, scroll-fade-[15%], and per-edge sizes like scroll-fade-b-8 tune the fade distance.
  • scroll-fade-none removes the mask for responsive or stateful overrides.