- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Scroll Fade
Utilities for adding a fade effect to the edges of a scroll container.
<div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
<div class="scroll-fade no-scrollbar h-72 overflow-y-auto">
<div class="flex flex-col gap-1.5 p-1.5">
@for (item of items; track item) {
<div class="bg-muted rounded-lg px-3 py-2.5 text-sm">{{ item }}</div>
}
</div>
</div>
</div>Installation
scroll-fade ships with Spartan's Tailwind preset ( hlm-tailwind-preset.css ). Projects set up with the Spartan CLI already have it — no extra install step.
Usage
Add scroll-fade or scroll-fade-y to the scroll container — the element with overflow-y-auto . Put borders and backgrounds on a wrapper so the fade dissolves content, not the frame.
| Class | What it does |
|---|---|
scroll-fade / scroll-fade-y | Fade top and bottom edges (vertical scroll) |
scroll-fade-x | Fade start/end edges (horizontal scroll, RTL-aware) |
scroll-fade-t / scroll-fade-b | Fade only the top or bottom edge |
scroll-fade-l / scroll-fade-r | Fade only the left or right edge |
scroll-fade-s / scroll-fade-e | Logical start/end edges (mirror in RTL) |
scroll-fade-* | Fixed fade depth on the spacing scale |
scroll-fade-t-* / scroll-fade-b-* / scroll-fade-s-* / scroll-fade-e-* | Configurable fade depth on the top, bottom, start, or end edge |
scroll-fade-none | Disable the fade |
The fade is scroll-aware: at rest the start edge is crisp and the end fades; mid-scroll both edges fade; at the end the trailing edge sharpens. Pair with no-scrollbar to hide the scrollbar. Attachment groups use scroll-fade-x .
No Overflow, No Fade
If the content does not overflow, no fade is shown.
<div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
<div class="scroll-fade no-scrollbar overflow-y-auto">
<div class="flex flex-col gap-1.5 p-1.5">
@for (item of items; track item) {
<div class="bg-muted rounded-lg px-3 py-2.5 text-sm">{{ item }}</div>
}
</div>
</div>
</div>Horizontal Scrolling
Use scroll-fade-x on containers with overflow-x-auto .
<div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
<div class="scroll-fade-x no-scrollbar overflow-x-auto">
<div class="flex w-max gap-1.5 p-1.5">
@for (tag of tags; track tag) {
<div class="bg-muted shrink-0 rounded-lg px-3 py-2.5 text-sm">{{ tag }}</div>
}
</div>
</div>
</div>Edge Fades
Use edge utilities when only one edge should track the scroll position. Prefer scroll-fade-s / scroll-fade-e for logical inline edges that mirror in RTL.
scroll-fade-t
scroll-fade-b
scroll-fade-s
scroll-fade-e
<div class="scroll-fade-b no-scrollbar h-36 overflow-y-auto">
<!-- fade only on the bottom edge -->
</div>
<div class="scroll-fade-s no-scrollbar overflow-x-auto">
<!-- logical start edge; mirrors in RTL -->
</div>Fade Size
The fade depth defaults to 12% of the container, capped at 40px . Use scroll-fade-* to set a fixed size on the spacing scale.
scroll-fade-4
scroll-fade-24
<div class="scroll-fade scroll-fade-24 no-scrollbar h-48 overflow-y-auto">
<!-- fixed fade depth on the spacing scale -->
</div>Disabling the Fade
Use scroll-fade-none to remove the fade. It works in any class order, so you can toggle it responsively or by state.
scroll-fade
scroll-fade scroll-fade-none
<div class="scroll-fade scroll-fade-none overflow-y-auto">
<!-- disable the fade -->
</div>RTL
scroll-fade-x follows the reading direction. At rest, the start edge is crisp and the end edge fades.
<div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border" dir="rtl">
<div class="scroll-fade-x no-scrollbar overflow-x-auto">
<div class="flex w-max gap-1.5 p-1.5">
@for (tag of tags; track tag) {
<div class="bg-muted shrink-0 rounded-lg px-3 py-2.5 text-sm">{{ tag }}</div>
}
</div>
</div>
</div>On This Page