HTML/CSS: Fade top and bottom of a scroll area

HTML

   

          

...

   


CSS

            .ScrollContainer
            {
                position: relative;
            }

            .ScrollContainer:before
            {
                content: '';
                position: absolute;
                top: 0;
                display: block;
                width: 95%;
                width: calc(100% - 16px); /* scroll bar is 16px wide */
                height: 13px;

                background: linear-gradient(top, white, rgba(255, 255, 255, 0));
                background: -o-linear-gradient(top, white, rgba(255, 255, 255, 0));
                background: -moz-linear-gradient(top, white, rgba(255, 255, 255, 0));
                background: -ms-linear-gradient(top, white, rgba(255, 255, 255, 0));
                background: -webkit-linear-gradient(top, white, rgba(255, 255, 255, 0));
   
                z-index: 1;
            }

            .ScrollContainer:after
            {
                content: '';
                position: absolute;
                bottom: 0;
                display: block;
                width: 95%;
                width: calc(100% - 16px); /* scroll bar is 16px wide */
                height: 13px;

                background: linear-gradient(bottom, white, rgba(255, 255, 255, 0));
                background: -o-linear-gradient(bottom, white, rgba(255, 255, 255, 0));
                background: -moz-linear-gradient(bottom, white, rgba(255, 255, 255, 0));
                background: -ms-linear-gradient(bottom, white, rgba(255, 255, 255, 0));
                background: -webkit-linear-gradient(bottom, white, rgba(255, 255, 255, 0));
   
                z-index: 1;
            }

            .ScrollArea
            {
                padding: 13px 0;
                max-height: 375px;
                overflow-y: auto;
                background-color: white;
            }