Merge scroll polish
A long row still fades as one surface, including row content and metadata.
Tailwind v4
Elegant, scroll-driven edge masking. One class. Zero JavaScript.
npm i tw-fade
Vertical
fade-y
Audit command density
The mask belongs on the scrolling list, not on a pseudo-element overlay.
Document Base UI variant
The example maps cleanly to nested scroll containers and dense action lists.
Remove extra edge overlays
CSS masks fade text, icons, focus rings, and row backgrounds together.
Check keyboard surfaces
Nothing about the utility assumes a card, feed, or media-heavy layout.
Tighten scroll primitives
Utilities should feel native inside menus, drawers, panes, and sheets.
Review overflow affordance
A longer list makes the scroll-gated mask visible at every resting state.
Keep focus rings inside the mask
Interactive rows fade with their focus treatment instead of sitting above it.
Ship Tailwind examples
The class list stays small enough to copy without explaining extra markup.
Check platform behavior
The demo keeps native overflow so each browser reveals its real scrolling feel.
Document class naming
Axis utilities and edge utilities can be combined without class-order tricks.
Measure mask clarity
Rows should disappear into the surface without dimming the middle content.
Reduce component noise
The example keeps attention on the fade instead of decorative badges.
Prepare sticky guidance
Sticky-edge caveats stay separate from the common list and panel paths.
Cut a release candidate
The final rows prove the list can scroll well past the first viewport.
Horizontal
fade-x
Advanced
fade-xy fade-size-2xl fade-range-md
ephemeral edges
ephemeral edges
ephemeral edges
ephemeral edges
ephemeral edges
ephemeral edges
ephemeral edges
ephemeral edges
ephemeral edges
ephemeral edges
Sides
Scroll aware
Fades ease in as you scroll away from an edge, then ease out again as you reach the other end. No JavaScript scroll listeners required.
Eased gradients
Each edge uses an eased alpha ramp, so content dissolves into the surface instead of ending in a hard clipped line.
Composable
Edge, axis, size, range, and clear-zone utilities combine on the scroll container without wrapper elements or overlay gradients.