Tw-fade: pure CSS scroll-driven edge masking

# tw-fade - Tailwind CSS scroll-edge fading Source: [https://pete.design/tw-fade](https://pete.design/tw-fade) Elegant, scroll\-driven edge masking\. One class\. Zero JavaScript\. By one of the creators of[tw\-shimmer](https://www.npmjs.com/package/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 size2xlScroll range2xl ### 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\. ## Works on any background DissolveRecedeSoftenVanishFadeBlurGhostDiffuseEclipseEbb