Tailwind CSS Scroll Fade

Use the scroll fade utility to mask the edges of a scroller so content fades out instead of clipping, like in a long list, a chat feed, or a horizontal row of tags. For styling the scrollbar itself, use the scrollbar utility.

<div class="w-full max-w-xs overflow-hidden rounded-2xl border">
  <div class="scroll-fade scrollbar-none h-72 overflow-y-auto">
    <div class="flex flex-col gap-1.5 p-1.5">
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 1</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 2</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 3</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 4</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 5</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 6</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 7</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 8</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 9</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 10</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 11</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 12</div>
    </div>
  </div>
</div>

Usage

Add scroll-fade to any vertical scroller, or a directional variant for horizontal scrollers and single edges. The fades follow the scroll position, so an edge only fades while more content lies in that direction. Size the fade with utilities like scroll-fade-16 or scroll-fade-[15%]. Browsers without scroll-driven animations fade the edges statically instead.

Class	Description
`scroll-fade` / `scroll-fade-y`	Add to a vertical scroller to fade both edges
`scroll-fade-x`	Add to a horizontal scroller to fade both edges
`scroll-fade-t`	Fade only the top edge
`scroll-fade-b`	Fade only the bottom edge
`scroll-fade-s`	Fade only the reading-direction start edge
`scroll-fade-e`	Fade only the reading-direction end edge
`scroll-fade-l`	Fade only the physical left edge
`scroll-fade-r`	Fade only the physical right edge
`scroll-fade-{n}`	Fade size, spacing scale or arbitrary value
`scroll-fade-t-{n}`	Fade size for one edge, also `b`, `s`, and `e`
`scroll-fade-none`	Remove the fade, for example at a breakpoint

<div class="scroll-fade h-64 overflow-y-auto">
  <!-- long content -->
</div>

Examples

No overflow, no fade

The fades are driven by the scroll position, so a scroller whose content fits shows no fade at all.

<div class="w-full max-w-xs overflow-hidden rounded-2xl border">
  <div class="scroll-fade scrollbar-none overflow-y-auto">
    <div class="flex flex-col gap-1.5 p-1.5">
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 1</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 2</div>
      <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 3</div>
    </div>
  </div>
</div>

Horizontal scroll fade

Add scroll-fade-x to a horizontal scroller. The fades follow the reading direction.

<div class="w-full max-w-xs overflow-hidden rounded-2xl border">
  <div class="scroll-fade-x scrollbar-none overflow-x-auto">
    <div class="flex w-max gap-1.5 p-1.5">
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">Design</div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Engineering
      </div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Marketing
      </div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Product
      </div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Research
      </div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">Sales</div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Support
      </div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Operations
      </div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Finance
      </div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">Legal</div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">People</div>
      <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
        Security
      </div>
    </div>
  </div>
</div>

Single edge fade

Fade a single edge with the directional variants: scroll-fade-t and scroll-fade-b for vertical scrollers, scroll-fade-s and scroll-fade-e for horizontal ones.

<div class="flex w-full max-w-xs min-w-0 flex-col gap-6">
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div class="scroll-fade-t scrollbar-none h-36 overflow-y-auto">
        <div class="flex flex-col gap-1.5 p-1.5">
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Inbox triage
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Design review
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            API contract
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">QA pass</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Launch notes
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Metrics follow-up
          </div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade-t
    </p>
  </div>
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div class="scroll-fade-b scrollbar-none h-36 overflow-y-auto">
        <div class="flex flex-col gap-1.5 p-1.5">
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Inbox triage
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Design review
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            API contract
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">QA pass</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Launch notes
          </div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">
            Metrics follow-up
          </div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade-b
    </p>
  </div>
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div class="scroll-fade-s scrollbar-none overflow-x-auto">
        <div class="flex w-max gap-1.5 p-1.5">
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Design
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Engineering
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Marketing
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Product
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Research
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Sales
          </div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade-s
    </p>
  </div>
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div class="scroll-fade-e scrollbar-none overflow-x-auto">
        <div class="flex w-max gap-1.5 p-1.5">
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Design
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Engineering
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Marketing
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Product
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Research
          </div>
          <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
            Sales
          </div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade-e
    </p>
  </div>
</div>

Fade size

Size utilities change how far the fade reaches: scroll-fade-{n} takes a spacing-scale value or an arbitrary length, and the per-edge forms like scroll-fade-b-8 size one edge on its own.

<div class="flex w-full max-w-xs flex-col gap-6">
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div
        class="scroll-fade scrollbar-none h-48 overflow-y-auto scroll-fade-4"
      >
        <div class="flex flex-col gap-1.5 p-1.5">
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 1</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 2</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 3</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 4</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 5</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 6</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 7</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 8</div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade-4
    </p>
  </div>
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div
        class="scroll-fade scrollbar-none h-48 overflow-y-auto scroll-fade-24"
      >
        <div class="flex flex-col gap-1.5 p-1.5">
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 1</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 2</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 3</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 4</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 5</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 6</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 7</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 8</div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade-24
    </p>
  </div>
</div>

Disabling the fade

Add scroll-fade-none to remove the fade, for example at a breakpoint where the layout no longer scrolls.

<div class="flex w-full max-w-xs min-w-0 flex-col gap-6">
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div class="scroll-fade scrollbar-none h-48 overflow-y-auto">
        <div class="flex flex-col gap-1.5 p-1.5">
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 1</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 2</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 3</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 4</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 5</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 6</div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade
    </p>
  </div>
  <div class="flex flex-col gap-3">
    <div class="overflow-hidden rounded-2xl border">
      <div
        class="scroll-fade scroll-fade-none scrollbar-none h-48 overflow-y-auto"
      >
        <div class="flex flex-col gap-1.5 p-1.5">
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 1</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 2</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 3</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 4</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 5</div>
          <div class="rounded-lg bg-muted px-3 py-2.5 text-sm">Item 6</div>
        </div>
      </div>
    </div>
    <p class="text-center font-mono text-xs text-muted-foreground">
      scroll-fade scroll-fade-none
    </p>
  </div>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. The inline fades of scroll-fade-x, scroll-fade-s, and scroll-fade-e mirror automatically. See the RTL guide for details.

<div
  id="scroll-fade-rtl-demo"
  dir="rtl"
  class="w-full max-w-xs overflow-hidden rounded-2xl border"
>
  <div class="scroll-fade-x scrollbar-none overflow-x-auto">
    <div class="flex w-max gap-1.5 p-1.5">
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="design"
      >
        التصميم
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="engineering"
      >
        الهندسة
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="marketing"
      >
        التسويق
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="product"
      >
        المنتج
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="research"
      >
        الأبحاث
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="sales"
      >
        المبيعات
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="support"
      >
        الدعم
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="operations"
      >
        العمليات
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="finance"
      >
        المالية
      </div>
      <div
        class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm"
        data-i18n="legal"
      >
        الشؤون القانونية
      </div>
    </div>
  </div>
</div>
 
<script>
  const translations = {
  ar: {
    dir: "rtl",
    design: "التصميم",
    engineering: "الهندسة",
    marketing: "التسويق",
    product: "المنتج",
    research: "الأبحاث",
    sales: "المبيعات",
    support: "الدعم",
    operations: "العمليات",
    finance: "المالية",
    legal: "الشؤون القانونية",
  },
  he: {
    dir: "rtl",
    design: "עיצוב",
    engineering: "הנדסה",
    marketing: "שיווק",
    product: "מוצר",
    research: "מחקר",
    sales: "מכירות",
    support: "תמיכה",
    operations: "תפעול",
    finance: "כספים",
    legal: "משפטי",
  },
  en: {
    dir: "ltr",
    design: "Design",
    engineering: "Engineering",
    marketing: "Marketing",
    product: "Product",
    research: "Research",
    sales: "Sales",
    support: "Support",
    operations: "Operations",
    finance: "Finance",
    legal: "Legal",
  },
};
window.addEventListener("message", (e) => {
  const t = translations[e.data?.lang];
  if (e.data?.type !== "sp-language" || !t) return;
  document.getElementById("scroll-fade-rtl-demo").dir = t.dir;
  document.querySelectorAll("[data-i18n]").forEach((el) => {
    el.textContent = t[el.dataset.i18n];
  });
});
</script>

CSS variables

Override the variables per element with an arbitrary property, or for the whole app with a CSS rule.

Variable	Default	Description
`--scroll-fade-size`	`min(12%, calc(var(--spacing) * 10))`	Depth of the fade at each edge
`--scroll-fade-t-size`	`--scroll-fade-size`	Depth for one edge, also `b`, `s`, and `e`
`--scroll-fade-reveal`	`calc(var(--spacing) * 24)`	Scroll distance over which a fade eases in near an edge
`--scroll-fade-mask`	The built-in gradient	The mask itself, set to `none` to disable

<div class="scroll-fade [--scroll-fade-reveal:8rem] h-72 overflow-y-auto">
  Long content
</div>