thinsoldier · August 25, 2017 01:43
diff --git a/gradient.css b/gradient.css
 body:before{
  content:'';
  position: fixed;
  top:0;
  bottom:0;
  width: 100%;
  background-image:
    radial-gradient(circle, transparent, #006),
    linear-gradient(to bottom, transparent 30%, yellow,orange,green);
  height: 100vh;
  background-repeat: no-repeat;
  background-position: fixed;
 }



 .content{
  width: 250px;
  margin: auto;
 }
diff --git a/html.html b/html.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 </head>
 <body>

  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, numquam sit perspiciatis? Sed doloremque rem quia natus veniam necessitatibus assumenda consequuntur repellendus reprehenderit, voluptatibus adipisci ullam illum itaque a vel culpa, dolore exercitationem libero, cupiditate deserunt ipsam quidem inventore fugiat, sapiente. At vero quisquam facilis aut et aliquam quia a blanditiis, optio, voluptate dignissimos! Nesciunt odit explicabo, nihil quam omnis, cupiditate ipsum sit animi ad sunt dolores quis atque molestias ipsam minus, odio libero incidunt ratione expedita corrupti quaerat asperiores. Optio totam, illo quasi amet, ipsam nobis magnam quidem esse, earum exercitationem, ullam. Vel repellat dolores dicta molestias ut repudiandae, sed facere molestiae assumenda est consectetur similique non iusto quasi architecto repellendus. Illum voluptates, quibusdam rem. Quisquam, atque minima magnam!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi quasi ut consectetur esse voluptatum neque eaque eligendi culpa veniam. Ducimus ratione enim molestiae officiis itaque aliquid sed sequi ad, facilis error voluptatum, ipsum vitae veritatis nesciunt quo! Quidem deserunt nisi facere neque, unde nesciunt quam velit, accusamus temporibus iure maxime laboriosam molestiae! Harum laborum doloremque officiis fugiat vel, nam cumque, ut quo expedita quibusdam veniam, nobis a sunt sed quod enim temporibus quasi. Quia voluptatibus recusandae voluptas totam similique voluptatum assumenda deleniti. Cumque minima eos voluptas dolores quisquam excepturi vero, laboriosam voluptate quo natus quas dolore delectus est, maxime blanditiis incidunt aliquam velit, explicabo veritatis alias. Eius hic molestiae voluptates nisi.
  </div>
 </body>
 </html>
	body:before{
	content:'';
	position: fixed;
	top:0;
	bottom:0;
	width: 100%;
	background-image:
	radial-gradient(circle, transparent, #006),
	linear-gradient(to bottom, transparent 30%, yellow,orange,green);
	height: 100vh;
	background-repeat: no-repeat;
	background-position: fixed;
	}



	.content{
	width: 250px;
	margin: auto;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<div class="content">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, numquam sit perspiciatis? Sed doloremque rem quia natus veniam necessitatibus assumenda consequuntur repellendus reprehenderit, voluptatibus adipisci ullam illum itaque a vel culpa, dolore exercitationem libero, cupiditate deserunt ipsam quidem inventore fugiat, sapiente. At vero quisquam facilis aut et aliquam quia a blanditiis, optio, voluptate dignissimos! Nesciunt odit explicabo, nihil quam omnis, cupiditate ipsum sit animi ad sunt dolores quis atque molestias ipsam minus, odio libero incidunt ratione expedita corrupti quaerat asperiores. Optio totam, illo quasi amet, ipsam nobis magnam quidem esse, earum exercitationem, ullam. Vel repellat dolores dicta molestias ut repudiandae, sed facere molestiae assumenda est consectetur similique non iusto quasi architecto repellendus. Illum voluptates, quibusdam rem. Quisquam, atque minima magnam!
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi quasi ut consectetur esse voluptatum neque eaque eligendi culpa veniam. Ducimus ratione enim molestiae officiis itaque aliquid sed sequi ad, facilis error voluptatum, ipsum vitae veritatis nesciunt quo! Quidem deserunt nisi facere neque, unde nesciunt quam velit, accusamus temporibus iure maxime laboriosam molestiae! Harum laborum doloremque officiis fugiat vel, nam cumque, ut quo expedita quibusdam veniam, nobis a sunt sed quod enim temporibus quasi. Quia voluptatibus recusandae voluptas totam similique voluptatum assumenda deleniti. Cumque minima eos voluptas dolores quisquam excepturi vero, laboriosam voluptate quo natus quas dolore delectus est, maxime blanditiis incidunt aliquam velit, explicabo veritatis alias. Eius hic molestiae voluptates nisi.
	</div>
	</body>
	</html>