Scrolling shadows by @kizmarh and @LeaVerou

dabblet.css

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

html {
	background: white;
	font: 120% sans-serif;
}

.scrollbox {
	overflow: auto;
	width: 200px;
	max-height: 200px;


	background:
		/* Shadow covers */
		linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
		linear-gradient(90deg, rgba(255,255,255,0), white 70%) 100% 0,
		
		/* Shadows */
		radial-gradient(0 50%, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(100% 50%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
	background:
		/* Shadow covers */
		linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
		linear-gradient(90deg, rgba(255,255,255,0), white 70%) 100% 0,
		
		/* Shadows */
		radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	
	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

dabblet.html

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

<div class="scrollbox">
	<table><tr>
		<td>Ah! Scroll  to the right</li>
		<td>2</li>
		<td>3</li>
		<td>4</li>		
		<td>5</li>		
		<td>6</li>		
		<td>7</li>		
		<td>8</li>		
		<td>9</li>		
		<td>10</li>		
		<td>11</li>		
		<td>12</li>		
		<td>13</li>		
		<td>No shadow there.</li>		
	</tr></table>
</div>

settings.json

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