scroll-fade
Utilities for adding a fade effect to the edges of a scroll container.
Usage
| Class | Behavior |
|---|---|
scroll-fade | Fade the top and bottom edges. |
scroll-fade-y | Fade the top and bottom edges. |
scroll-fade-x | Fade the logical start and end edges. |
scroll-fade-t | Fade only the top edge. |
scroll-fade-b | Fade only the bottom edge. |
scroll-fade-l | Fade only the physical left edge. |
scroll-fade-r | Fade only the physical right edge. |
scroll-fade-s | Fade the logical start edge; mirrors in RTL. |
scroll-fade-e | Fade the logical end edge; mirrors in RTL. |
scroll-fade-<number> | Set the fade size from the spacing scale. |
scroll-fade-[<value>] | Set an arbitrary fade size. |
scroll-fade-{t,b,s,e}-<number> | Set one edge size from the spacing scale. |
scroll-fade-{t,b,s,e}-[<value>] | Set an arbitrary size for one edge. |
scroll-fade-none | Remove the fade mask. |
The fade follows the scroll position:
- At the start, the top edge stays crisp while the bottom fades to signal more content.
- After scrolling, the top fade appears; both edges remain faded through the middle.
- At the final item, the bottom fade clears to show that the list has ended.
The mask belongs on the inner scrolling viewport. Keep borders, radii, and backgrounds on an outer wrapper so only the content dissolves.
Installation
Copy plugins/scroll-fade.js into your Tailwind v3 project,
then register it in tailwind.config.cjs.
module.exports = {
plugins: [require("./plugins/scroll-fade")],
}No Overflow, No Fade
Content that fits remains crisp. The utility can stay applied without checking whether the list overflows.
Horizontal Scrolling
Use scroll-fade-x on the inner element that owns horizontal overflow.
Edge Fades
Use an edge utility when only one edge should track scrolling.
Fade Size
The default is 12% of the viewport, capped at 40px. Use the spacing scale or an arbitrary value to override it.
Disabling the Fade
Add scroll-fade-none to remove the mask without changing the scroll layout.