Scrolling shadows by @kizmarh

dabblet.css

/* Scrolling shadows by @kizmarh */

html {
	background: #FFF;
}

.scrollbox {
	position: relative;
	z-index: 1;

	overflow: auto;

	width: 200px;
	max-height: 200px;
	margin: 50px auto;

	background: #FFF no-repeat;
	background-image:
		radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
	background-position: 0 0, 0 100%;
	background-size: 100% 14px;
}

.scrollbox:before,
.scrollbox:after {
	content: "";
	position: relative;
	z-index: -1;
	
	display: block;
	
	height: 30px;
	margin: 0 0 -30px;
	background: linear-gradient(top,#FFF,#FFF 30%,rgba(255,255,255,0));
}
.scrollbox:after {
	margin: -30px 0 0;
	background: linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
}

dabblet.html

<h1>CSS-only shadow-scrolling effect.</h1>

<div class="scrollbox">
	<ul>
		<li>Not enough content to scroll</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>


<div class="scrollbox">
	<ul>
		<li>Ah! Scroll below!</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>The end!</li>
		<li>No shadow there.</li>
	</ul>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}