Swimburger/index.css

## index.css
*{
  margin: 0;
  padding: 0;
}
.outer{
  height: 500px;
  width: 100%;
  overflow: scroll;
  overflow-x: hidden;
}

.inner{
  background: white;
}

.outer:after{
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 500px;
  -moz-box-shadow: inset 0 -10px 10px -10px #000000;
  -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
  box-shadow: inset 0 -10px 10px -10px #000000;
}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="outer">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi hic voluptatem illum quas ipsum, atque corporis officiis exercitationem quos fugiat minima saepe, nisi consequatur, necessitatibus aspernatur at eligendi dolorum iusto.</p>
    <p>Debitis omnis, voluptate, ipsa excepturi, nihil perferendis quam iure obcaecati accusamus animi inventore. Praesentium cumque ducimus et, optio odit maiores necessitatibus maxime dolor, explicabo tempore ipsum architecto, animi in voluptates?</p>
    <p>Neque quo fugiat officia atque dolore! Quaerat incidunt eaque nemo blanditiis ipsam! Harum velit cum sapiente culpa libero aliquid voluptatibus accusamus, repellendus perspiciatis alias, accusantium obcaecati inventore minus nam quasi!</p>
    <p>Nostrum laudantium rerum ipsum sequi eius. Architecto soluta odit libero repellat fuga maiores facilis nisi harum dignissimos corrupti delectus ipsum voluptate hic recusandae, nemo veritatis expedita cupiditate, eos corporis quibusdam?</p>
    <p>Quas reprehenderit in vero accusamus nostrum modi doloribus dolorum, officiis enim, accusantium harum ipsam laborum et nesciunt voluptas pariatur, porro voluptate cumque atque ducimus a. Quas sapiente animi, natus ea.</p>
    <p>Dolor quae maiores error id incidunt consequatur neque illo accusantium, eaque nisi atque rerum eius at asperiores porro rem adipisci distinctio quod qui. Optio minima officia natus voluptates, quis nemo.</p>
    <p>Consequuntur, maxime in architecto ea quo impedit quidem est alias aspernatur ducimus veritatis ab obcaecati rerum porro illo tempora reprehenderit similique itaque magnam sunt. Sit provident possimus nam a doloribus?</p>
    <p>Non sed iusto est dolores iste impedit sapiente nemo. Quia vitae totam non magni doloribus maiores sed asperiores, fugiat, numquam ullam nemo nesciunt modi autem deleniti. Facilis ad quam vel?</p>
    <p>Maiores nostrum ea adipisci quibusdam, est, minus dicta dolorum praesentium molestiae eveniet distinctio ut sapiente assumenda, amet. Pariatur debitis iste natus cum, error harum perspiciatis at quae dignissimos, esse placeat.</p>
    <p>Aperiam, esse. Perspiciatis consequatur voluptates tenetur voluptatum, quae atque, sequi dolore inventore aut, amet impedit. Qui unde maxime nulla a praesentium eligendi, eaque, quam quos excepturi, quia dolorum eos nemo.</p>
    <p>Ullam voluptatibus dolorem, eius similique. Perferendis nulla officia iure voluptate architecto cumque nam, et. Magni perspiciatis expedita fuga accusamus non veritatis, sint eveniet, debitis nemo iste, quos itaque voluptate quia.</p>
    <p>Consequatur cumque ea maxime laboriosam iusto pariatur ullam, a veritatis optio tenetur. Dicta id sequi amet esse totam recusandae, voluptates assumenda blanditiis earum adipisci ipsa maiores ad obcaecati beatae vero.</p>
    <p>Deserunt, molestias, aperiam. Repellat magnam officia voluptates ipsum, repudiandae cumque, maxime excepturi suscipit quos enim ipsam itaque similique asperiores labore sunt! Eum omnis ad aut ducimus nemo, sunt soluta illum.</p>
    <p>Rerum, voluptas ipsam dicta iure perferendis omnis quae doloribus earum itaque saepe sint quod, sunt aspernatur recusandae, voluptatem quos mollitia. Pariatur ut expedita sunt, minima aut accusamus dicta reiciendis consequatur.</p>
    <p>Minima harum enim magni quis ipsa quidem necessitatibus modi maiores doloremque veritatis fugiat sed consequuntur sint nostrum accusamus possimus, repellat culpa nisi laborum officiis. Distinctio praesentium animi, suscipit rerum fugiat.</p>
    <p>Labore asperiores ipsa, voluptates pariatur eum, et. Voluptate ullam illum velit animi, esse commodi eos similique dignissimos atque itaque maxime quae quam nesciunt saepe cum explicabo temporibus, incidunt laboriosam doloribus.</p>
    <p>Velit sapiente beatae quidem perferendis et ipsa fugiat porro eligendi praesentium aut amet, blanditiis, repellat. Deserunt, eveniet laborum. Inventore exercitationem at ex optio nihil eligendi hic quod, necessitatibus, dicta omnis.</p>
    <p>Reiciendis dolores consequuntur distinctio dolorum rem porro ut quae repellendus architecto in adipisci hic sint maiores, possimus cum odio neque nobis quis sunt, aliquid. Maxime sed recusandae odit, adipisci deserunt!</p>
    <p>Magnam, nemo. Corrupti aliquam atque, sint itaque molestias commodi iusto minus ex repellat, voluptatem, quo nisi amet nostrum repellendus eveniet assumenda voluptates, autem officiis facilis necessitatibus nulla magnam porro. Quae?</p>
    <p>Animi labore dolores, odit quaerat harum deleniti, ullam placeat aspernatur consectetur quibusdam perspiciatis maxime totam nostrum commodi architecto dolor quis nemo nihil recusandae numquam repellendus. Minima, eveniet sit facere obcaecati!</p>
  </div>
</div>
</body>
</html>
	*{
	margin: 0;
	padding: 0;
	}
	.outer{
	height: 500px;
	width: 100%;
	overflow: scroll;
	overflow-x: hidden;
	}

	.inner{
	background: white;
	}

	.outer:after{
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 500px;
	-moz-box-shadow: inset 0 -10px 10px -10px #000000;
	-webkit-box-shadow: inset 0 -10px 10px -10px #000000;
	box-shadow: inset 0 -10px 10px -10px #000000;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="outer">
	<div class="inner">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi hic voluptatem illum quas ipsum, atque corporis officiis exercitationem quos fugiat minima saepe, nisi consequatur, necessitatibus aspernatur at eligendi dolorum iusto.</p>
	<p>Debitis omnis, voluptate, ipsa excepturi, nihil perferendis quam iure obcaecati accusamus animi inventore. Praesentium cumque ducimus et, optio odit maiores necessitatibus maxime dolor, explicabo tempore ipsum architecto, animi in voluptates?</p>
	<p>Neque quo fugiat officia atque dolore! Quaerat incidunt eaque nemo blanditiis ipsam! Harum velit cum sapiente culpa libero aliquid voluptatibus accusamus, repellendus perspiciatis alias, accusantium obcaecati inventore minus nam quasi!</p>
	<p>Nostrum laudantium rerum ipsum sequi eius. Architecto soluta odit libero repellat fuga maiores facilis nisi harum dignissimos corrupti delectus ipsum voluptate hic recusandae, nemo veritatis expedita cupiditate, eos corporis quibusdam?</p>
	<p>Quas reprehenderit in vero accusamus nostrum modi doloribus dolorum, officiis enim, accusantium harum ipsam laborum et nesciunt voluptas pariatur, porro voluptate cumque atque ducimus a. Quas sapiente animi, natus ea.</p>
	<p>Dolor quae maiores error id incidunt consequatur neque illo accusantium, eaque nisi atque rerum eius at asperiores porro rem adipisci distinctio quod qui. Optio minima officia natus voluptates, quis nemo.</p>
	<p>Consequuntur, maxime in architecto ea quo impedit quidem est alias aspernatur ducimus veritatis ab obcaecati rerum porro illo tempora reprehenderit similique itaque magnam sunt. Sit provident possimus nam a doloribus?</p>
	<p>Non sed iusto est dolores iste impedit sapiente nemo. Quia vitae totam non magni doloribus maiores sed asperiores, fugiat, numquam ullam nemo nesciunt modi autem deleniti. Facilis ad quam vel?</p>
	<p>Maiores nostrum ea adipisci quibusdam, est, minus dicta dolorum praesentium molestiae eveniet distinctio ut sapiente assumenda, amet. Pariatur debitis iste natus cum, error harum perspiciatis at quae dignissimos, esse placeat.</p>
	<p>Aperiam, esse. Perspiciatis consequatur voluptates tenetur voluptatum, quae atque, sequi dolore inventore aut, amet impedit. Qui unde maxime nulla a praesentium eligendi, eaque, quam quos excepturi, quia dolorum eos nemo.</p>
	<p>Ullam voluptatibus dolorem, eius similique. Perferendis nulla officia iure voluptate architecto cumque nam, et. Magni perspiciatis expedita fuga accusamus non veritatis, sint eveniet, debitis nemo iste, quos itaque voluptate quia.</p>
	<p>Consequatur cumque ea maxime laboriosam iusto pariatur ullam, a veritatis optio tenetur. Dicta id sequi amet esse totam recusandae, voluptates assumenda blanditiis earum adipisci ipsa maiores ad obcaecati beatae vero.</p>
	<p>Deserunt, molestias, aperiam. Repellat magnam officia voluptates ipsum, repudiandae cumque, maxime excepturi suscipit quos enim ipsam itaque similique asperiores labore sunt! Eum omnis ad aut ducimus nemo, sunt soluta illum.</p>
	<p>Rerum, voluptas ipsam dicta iure perferendis omnis quae doloribus earum itaque saepe sint quod, sunt aspernatur recusandae, voluptatem quos mollitia. Pariatur ut expedita sunt, minima aut accusamus dicta reiciendis consequatur.</p>
	<p>Minima harum enim magni quis ipsa quidem necessitatibus modi maiores doloremque veritatis fugiat sed consequuntur sint nostrum accusamus possimus, repellat culpa nisi laborum officiis. Distinctio praesentium animi, suscipit rerum fugiat.</p>
	<p>Labore asperiores ipsa, voluptates pariatur eum, et. Voluptate ullam illum velit animi, esse commodi eos similique dignissimos atque itaque maxime quae quam nesciunt saepe cum explicabo temporibus, incidunt laboriosam doloribus.</p>
	<p>Velit sapiente beatae quidem perferendis et ipsa fugiat porro eligendi praesentium aut amet, blanditiis, repellat. Deserunt, eveniet laborum. Inventore exercitationem at ex optio nihil eligendi hic quod, necessitatibus, dicta omnis.</p>
	<p>Reiciendis dolores consequuntur distinctio dolorum rem porro ut quae repellendus architecto in adipisci hic sint maiores, possimus cum odio neque nobis quis sunt, aliquid. Maxime sed recusandae odit, adipisci deserunt!</p>
	<p>Magnam, nemo. Corrupti aliquam atque, sint itaque molestias commodi iusto minus ex repellat, voluptatem, quo nisi amet nostrum repellendus eveniet assumenda voluptates, autem officiis facilis necessitatibus nulla magnam porro. Quae?</p>
	<p>Animi labore dolores, odit quaerat harum deleniti, ullam placeat aspernatur consectetur quibusdam perspiciatis maxime totam nostrum commodi architecto dolor quis nemo nihil recusandae numquam repellendus. Minima, eveniet sit facere obcaecati!</p>
	</div>
	</div>
	</body>
	</html>