Scrolling shadows by @kizmarh, @LeaVerou, and @trueflyingsheep

dabblet.css

/**
 * Scrolling shadows by @kizmarh, @leaverou, and @trueflyingsheep
 * Only works in browsers supporting background-attachment: local, CSS gradients, and masks
 * Degrades gracefully
 */

html {
	background: repeating-linear-gradient(45deg,
		rgba(255,0,0,.1),
		rgba(0,0,255,.1) 100px,
		rgba(255,0,0,.1) 200px);
	font: 120% sans-serif;
}

.scrollbox {
	overflow: auto;
	width: 200px;
	max-height: 200px;
	margin: 50px auto;
	mask-attachment: local;
	mask-image:
		linear-gradient(
			rgba(0,0,0,0),
			rgba(0,0,0,1) 30px,
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) 50%),
		linear-gradient(bottom,
			rgba(0,0,0,0),
			rgba(0,0,0,1) 30px,
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) 50%);

	background:
		radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 15px, 100% 15px;
	
	/* Opera doesn't support this in the shorthand */
	background-attachment: scroll, scroll;
}

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":"css"}