June 25, 2026
Fade to black... and back again
Tw-fade: pure CSS scroll-driven edge masking
A clever scrolling fade wowed some people, but others just got lag, broken keys, and attitude
TLDR: Tw-fade shows a neat way to make scrolling boxes fade at the edges so people can tell more content is hidden. Commenters split fast: some loved the slick look, while others complained about lag, broken keyboard controls, and the fact that it falls apart in Firefox.
A tiny web design trick turned into a full-on comment section soap opera. The idea behind Tw-fade is simple enough for non-coders to get: when you scroll through a box of content, the edges softly fade in and out so you can tell there’s more to read, while the newest item stays crisp and clear. Creator petekp pitched it as a cleaner, modern way to do an old visual effect without extra scripts constantly watching your scrolling.
But the real spectacle was the crowd reaction. One camp went, "Neat!" and immediately tried to skip the install entirely, with one commenter basically saying, why download a whole add-on when you can just steal the style and move on? The other camp was far louder: people on Firefox and Ubuntu stormed in complaining the demo was "slow as balls" and so laggy it felt like the effect was less "smooth fade" and more "melting browser." Another user piled on with the accessibility drag: arrow keys don’t work, Page Down doesn’t work. Ouch.
That’s where the drama really hit. The maker said it works on most browsers, except Firefox, which doesn’t yet support the scrolling feature needed here. So some of the angriest reactions were immediately followed by the awkward walk-back: "Oh... my mistake." In other words, this wasn’t just a demo launch. It was a classic internet showdown between "cool trick!" and "why is my computer crying?"
Key Points
- •The article introduces tw-fade as a pure CSS solution for scroll-driven edge masking.
- •It demonstrates the effect in both horizontal and vertical scrolling contexts.
- •Content at the edges fades while scrolling to indicate additional off-screen material.
- •The newest message in the thread remains sharp instead of being faded.
- •The fade effect appears only when more content is available to scroll and disappears at the boundaries.