CSS Tip

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);  
  background: 
    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?

More CSS Tips