overflow shadows with before after

by Pavlo

HTML

<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>

CSS

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

    overflow: auto;

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

    background: #FFF no-repeat;
    background-image:
        -webkit-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
        -webkit-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image:
        -moz-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
        -moz-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image:
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, 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: -webkit-linear-gradient(top,#FFF,#FFF 30%,rgba(255,255,255,0));
    background:    -moz-linear-gradient(top,#FFF,#FFF 30%,rgba(255,255,255,0));
    background:   linear-gradient(to bottom,#FFF,#FFF 30%,rgba(255,255,255,0));
    }
.scrollbox:after {
    margin: -30px 0 0;
    background: -webkit-linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
    background:    -moz-linear-gradient(top,rgba(255,255,255,0),#FFF 70%,#FFF);
    background:   linear-gradient(to bottom,rgba(255,255,255,0),#FFF 70%,#FFF);
    }