Scroll Fade Effect

Pure CSS gradient fade effect at scroll container edges.

scroll fade gradient css reveal

Item 1 - Scroll to see the fade effect

Item 2 - Scroll to see the fade effect

Item 3 - Scroll to see the fade effect

Item 4 - Scroll to see the fade effect

Item 5 - Scroll to see the fade effect

Item 6 - Scroll to see the fade effect

Item 7 - Scroll to see the fade effect

Item 8 - Scroll to see the fade effect

Item 9 - Scroll to see the fade effect

Item 10 - Scroll to see the fade effect

Item 11 - Scroll to see the fade effect

Item 12 - Scroll to see the fade effect

Item 13 - Scroll to see the fade effect

Item 14 - Scroll to see the fade effect

Item 15 - Scroll to see the fade effect

Item 16 - Scroll to see the fade effect

Item 17 - Scroll to see the fade effect

Item 18 - Scroll to see the fade effect

Item 19 - Scroll to see the fade effect

Item 20 - Scroll to see the fade effect

"use client";

import { ScrollFadeEffect } from "@/components/vritti/scroll-fade-effect";

export function ScrollFadeEffectExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <ScrollFadeEffect className="h-48 w-64 overflow-y-auto">
        <div className="space-y-4 p-4">
          {Array.from({ length: 20 }, (_, i) => (
            <p key={i} className="text-sm text-muted-foreground">
              Item {i + 1} - Scroll to see the fade effect
            </p>
          ))}
        </div>
      </ScrollFadeEffect>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/scroll-fade-effect"