Skip to main content

CSS-only scrolling shadow

Create a CSS-only Scrolling Shadow effect with a few lines of code.

CSS-only scrolling shadow

.scrollbox {
overflow: auto;

--g: radial-gradient(55% 20px, #0009, #0000);
linear-gradient(#fff 10px, #0000 40px calc(100% - 40px),#fff calc(100% - 10px)) local,
var(--g) top /100% 200%,
var(--g) bottom/100% 200%;

See the Pen CSS only Scrolling shadow by Temani Afif (@t_afif) on CodePen.

More detail: How does this scrolling shadows CSS-magic work?