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>Scroll To the right!</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 ul {
  display:flex;
}
.scrollbox ul li {
  min-width: 200px;
  background-color: yellow;
}

.scrollbox {
    border: 1px solid salmon;
    position: relative;
    z-index: 1;

    overflow: auto;

    width: 300px;
    max-width: 300px;
    /* margin: auto 50px; */

    background: transparent 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 100%, 0 0;
    background-size: 14px 100%;
    }
/* 
.scrollbox:before {
  left: 0px;
} */
.scrollbox:before, .scrollbox:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;

    display: block;

    width: 30px;
    height: 100%;
    background:   linear-gradient(to right,#FFF,#FFF 30%,rgba(255,255,255,0));
}
.scrollbox:after {
    margin-right:-30px;
    right: 0px;
    background:   linear-gradient(to right,rgba(255,255,255,0),#FFF 70%,#FFF);
}