Untitled

dabblet.css

body {
    font-family: Helvetica, Arial;
    font-weight: 300;
}

.container {
    border: 1px solid #ccc;
    margin: 20px auto;
    position: relative;
}

.overflow-scroll__scroller {
    background: white;
}

.container:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 97%;
    height: 17px;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.5), white);

    /* transparent keyword is broken in Safari */
    pointer-events: none;
}
.container:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 97%;
    height: 18px;
    background: linear-gradient( rgba(255, 255, 255, 0.5), white);
    /* transparent keyword is broken in Safari */
    pointer-events: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 201px;
    overflow: hidden;
    overflow-y: auto;
}

ul::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 15px;
}

ul::-webkit-scrollbar-thumb {
    background: #ccc;
}

li {
    margin: 0;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    width: 97%;
}

li:first-child {
    padding-top: 14px;
}

li:last-child {
    padding-bottom: 14px;
    border-bottom: none;
}

dabblet.html

<h1>CSS-only Fading scrollable lists</h1>

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

<div class="container">
	<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>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
		<li>21</li>
		<li>22</li>
		<li>23</li>
		<li>24</li>
		<li>25</li>
		<li>26</li>
		<li>27</li>
		<li>28</li>
		<li>The end!</li>
		<li>No shadow there.</li>
	</ul>
</div>

settings.json

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