tw-fade - Tailwind CSS scroll-edge fading with CSS masks

Scroll-driven fades and blur. Zero JavaScript.
By one of the creators of tw-shimmer .

npm i tw-fade

Horizontal `fade-x`

Vertical `fade-y`

how'd you get the messages to fade out at the top

fade-y on the scroll container

no wrapper?

fade needs no wrapper. for blur, put the effect classes on a frame

ok moved it

but the top fade went away?

you're at the top. nothing above you, so nothing to hint at

and when i'm at the bottom

same. the newest message is always readable

js?

no. just css

can i do that on the tab strip too

yep, just add fade-x

ok that's kind of lovely

right?

unrelated but go outside

why

the moon is huge right now

the moon is always the same size

just go look

ok going

Fade Blur Both

fade-blur-frame fade-y Blur setup

Advanced `fade-blur-frame fade fade-size-2xl fade-travel-lg`

Peripheral impermanence

Edges

Direction

Edge size 2xl Blur strength md Travel lg

Blur setup

Put fade-blur-frame and the effect classes on the frame. Its first child scrolls. Fade alone can still go directly on a scroller.

<div class="fade-blur-frame fade-y fade-blur-y rounded-xl">
  <div class="h-80 overflow-y-auto">
    ...
  </div>
</div>

Use equal-radius round corners. The edge blur also softens the background behind transparent content. Full blur setup

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

Combine direction, size, travel, and clear-zone controls.

Works on any background

Dissolve Recede Soften Vanish Fade Blur Ghost Diffuse Eclipse Ebb

Horizontal fade-x

Vertical fade-y

Advanced fade-blur-frame fade fade-size-2xl fade-travel-lg