Snippets / UI Components /

Overflow Scroll Container

A scrollable container with overflow: auto, custom scrollbar styling, and scroll-shadow fade edges.

Scrollable Content

This container uses overflow-y: auto to enable scrolling only when content exceeds the fixed height.

The scrollbar is styled using ::-webkit-scrollbar pseudo-elements for a custom look that matches the theme.

Notice the fade effect at the top and bottom of the content area. This is achieved using mask-image with a linear gradient, creating a smooth transition into the scrollable area.

Try scrolling down to see the bottom fade effect in action. The scrollbar thumb also changes color on hover.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Widely Supported
uilayoutno-js

Quick implementation

.overflow-scroll-container {
  width: 100%;
  max-width: 400px;
  height: 300px;
  background: oklch(0.98 0.01 260);
  border: 1px solid oklch(0.9 0.02 260);
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow-y: auto;
  position: relative;
  /* Scroll Shadow Fade using mask-image */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, oklch(0 0 0) 10%, oklch(0 0 0) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, oklch(0 0 0) 10%, oklch(0 0 0) 90%, transparent 100%);
}

/* Custom Scrollbar Styling */
.overflow-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.overflow-scroll-container::-webkit-scrollbar-track {
  background: oklch(0.95 0.01 260);
  border-radius: 4px;
}

.overflow-scroll-container::-webkit-scrollbar-thumb {
  background: oklch(0.7 0.02 260);
  border-radius: 4px;
}

.overflow-scroll-container::-webkit-scrollbar-thumb:hover {
  background: oklch(0.6 0.02 260);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Create a CSS component for a scrollable container.
Requirements:
1. Fixed height (e.g., 300px) with overflow-y: auto.
2. Custom scrollbar styling for Webkit browsers (track and thumb).
3. Add a visual "fade" effect at the top and bottom of the content area using mask-image (linear-gradient).
4. Use oklch() for all colors.
5. Ensure the container has a border and padding.
6. Provide a usage example with dummy text.
7. Ensure accessibility (focus states if interactive).
Output only the CSS and the HTML structure.

Why this matters in 2026

Scrollable containers are a staple of modern UI, especially in dashboard layouts, modal dialogs, and mobile-first designs where screen real estate is limited. While overflow: auto is standard, the default browser scrollbars often look out of place in polished applications. This snippet provides a consistent, aesthetically pleasing scroll experience that matches the rest of your design system.

The logic

The core of this component relies on three CSS properties:

  • overflow-y: auto: This ensures the content is scrollable only when it exceeds the container's height, preventing unnecessary scrollbars on short content.
  • ::-webkit-scrollbar: These pseudo-elements allow us to style the scrollbar track and thumb, replacing the browser default with a custom design that uses oklch() colors for better contrast and theming.
  • mask-image: This is the key to the "fade" effect. By applying a linear gradient that transitions from transparent to opaque (and back), we create a smooth visual cue that content continues beyond the visible area. This is often more performant and cleaner than using pseudo-elements with box-shadows.

Accessibility & performance

While custom scrollbars look great, they can sometimes be tricky for users with motor impairments if the thumb is too small. Ensure the width of the scrollbar thumb is at least 8px for easy grabbing. Also, remember that mask-image is widely supported but has fallback considerations for older browsers (though the scroll functionality remains intact). Always test with keyboard navigation to ensure focus states are visible within the scrollable area.