scrollintermediate

Scroll Shadow Indicator

Shadow indicators showing scrollable content above or below.

Preview

Scrollable content item 1

Scrollable content item 2

Scrollable content item 3

Tailwind Classes

overflow-auto [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]

CSS Code

.scroll-shadow {
  overflow: auto;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

HTML Example

<div class="h-48 overflow-auto [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]">
  <div class="space-y-4 py-6">
    <p>Scrollable content item 1</p>
    <p>Scrollable content item 2</p>
    <p>Scrollable content item 3</p>
    <!-- More items -->
  </div>
</div>

Use Cases

Long listsDropdownsScrollable containersModal content

Browser Support

All modern browsers

#scroll#shadow#overflow#ux