tw-fade - Tailwind CSS scroll-edge fading

Tailwind v4 Plugin Elegant, scroll-driven edge masking. One class. Zero JavaScript. By one of the creators of tw-shimmer CSS-only shimmer effects, with 475k+ weekly npm downloads. . npm i tw-fade

Horizontal fade-x

Vertical fade-y

this feed has a hard edge add fade-y to the scroll area do i need another wrapper? no. use the element that scrolls at the top, does the fade stay? no, the top fade clears and at the end? the bottom fade clears the newest message stays clear horizontal tabs too? use fade-x on the rail can i make the fade wider? set a larger range top edge by itself? use fade-t

Advanced fade-xy fade-size-2xl fade-range-md

Peripheral impermanence Peripheral impermanence Peripheral impermanence Peripheral impermanence Peripheral impermanence Peripheral impermanence Peripheral impermanence Peripheral impermanence

Peripheral impermanence Peripheral impermanence Peripheral impermanence Fade size 2xl Scroll range 2xl Edges

Scroll aware Fades appear only when there is more content to scroll, then ease away again at either edge. Eased gradients Eased alpha ramps dissolve content into the surface instead of ending on a clipped line. Composable Axis, size, range, and clear-zone utilities compose directly on the scroll container.