CSS only Scroll Shadow

February 22, 2026

An easy way to make CSS only scroll shadows that only shows up when there are content outside the visible area of the scroll container is to use multiple background images with background short hand and multiple gradients, combined with the background-attachment rule to define where the shadow sticks.

Consider the following markup

<div>
  <ul class="scroll-shadows">
    <li>Lorem, ipsum.</li>
    <li>Eligendi, repudiandae.</li>
    <li>Dolor, vel.</li>
    <li>Obcaecati, praesentium.</li>
    <li>Impedit, tenetur.</li>
    <li>Exercitationem, repellat!</li>
    <li>Aut, asperiores!</li>
    <li>Dolor, fuga.</li>
    <li>Ab, aliquid!</li>
    <li>Adipisci, totam.</li>
    <li>Error, dicta.</li>
    <li>Saepe, vero?</li>
    <li>Eveniet, dolorem!</li>
    <li>Id, tempora!</li>
    <li>Voluptate, consectetur?</li>
    <li>Voluptatibus, omnis.</li>
    <li>Eius, fugit.</li>
    <li>Quia, non!</li>
    <li>At, laudantium?</li>
    <li>Commodi, maiores!</li>
  </ul>
</div>

Paired with the following css

.scroll-shadows {
  max-height: 200px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;

  background:
    /* Shadow Cover TOP */
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top,
    
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom,
    
    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,
    
    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;
  
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

Kudos to https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/