CSS 전용 스크롤 그림자

몇 줄의 코드로 CSS 전용 스크롤 그림자 효과를 만듭니다.

• 자바스크립트 없음
• 추가 요소 없음
• 의사 요소 없음
• 배경 속성만 해당됩니다.

 

.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%;
}