4 lines of background is all it takes to add scroll shadows that automatically appear when there's content to scroll and disappear when you hit the edge.

The Trick

The technique layers two types of background-attachment:

local — moves WITH the content (acts as a "cover")

scroll — stays FIXED to the container (the shadow)

When you scroll, the cover slides away and reveals the shadow underneath. It's like a curtain revealing what's behind it.

The Code

.scroll-container {
  overflow-y: auto;
  background:
    linear-gradient(var(--bg) 33%, transparent) top,
    linear-gradient(transparent, var(--bg) 66%) bottom,
    radial-gradient(farthest-side at 50% 0,
      rgba(0,0,0,.12), transparent) top,
    radial-gradient(farthest-side at 50% 100%,
      rgba(0,0,0,.12), transparent) bottom;
  background-size:
    100% 40px, 100% 40px,
    100% 6px, 100% 6px;
  background-repeat: no-repeat;
  background-attachment:
    local, local, scroll, scroll;
}

That's it. Works in every browser.

Why This Beats JS Solutions

Zero runtime cost

Works with any background color (just use a CSS variable)

Adapts to light/dark mode automatically

No layout shifts, no flickering

Works on any scrollable container

Credit

Credit to Lea Verou who pioneered this technique years ago. Still one of the most elegant CSS tricks out there.

Cover Photo by Susan Gold on Unsplash