CSS3 lens flare code - Neil Magee - Web Design Leicester

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

	<title>CSS3 Lens Flare Example</title>

	<style type="text/css">
	html, body {
		height: 100%;
	}
	body {
		background: #000;
		margin: 0;
		padding: 0;
	}
	.lens-flare {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
	}
	.circle-a {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(34,45,24,0.2) 30%,rgba(80,201,32, 0.6) 100%);
		border-radius: 75px;
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
		position: absolute;
		left: 12%;
		top: 12%;
		z-index: 1;
	}
	.circle-b {
	    background: radial-gradient(50% 50%, circle closest-corner, rgba(255,255,255,1.0) 0%, rgba(255,51,102,0.3) 35%, rgba(255,51,102,0.1) 55%, rgba(255,51,102,0) 75%);
		border-radius: 400px;
		width: 800px;
		height: 800px;
		margin: -400px 0 0 -400px;
		position: absolute;
		left: 25%;
		top: 25%;
		z-index: 2;
	}
	.circle-c {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(212,79,13,0) 40%,rgba(212,79,13,0.5)45%,rgba(212,79,13,0) 50%);
		border-radius: 200px;
		width: 400px;
		height: 400px;
		margin: -200px 0 0 -200px;
		position: absolute;
		left: 25%;
		top: 25%;
		z-index: 3;
	}
	.circle-d {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(212,79,13,0) 40%,rgba(212,79,13,0.4) 60%,rgba(212,79,13,0) 65%);
		border-radius: 350px;
		width: 700px;
		height: 700px;
		margin: -350px 0 0 -350px;
		position: absolute;
		left: 83%;
		top: 83%;
		z-index: 4;
	}
	.circle-e {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(34,45,24,0.2) 30%,rgba(80,201,32, 0.5) 100%);
		border-radius: 150px;
		width: 300px;
		height: 300px;
		margin: -150px 0 0 -150px;
		position: absolute;
		left: 73%;
		top: 73%;
		z-index: 5;
	}
	.circle-f {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(24,62,173,0) 10%, rgba(24,62,173,0.2) 60%);
		border-radius: 50px;
		width: 100px;
		height: 100px;
		margin: -50px 0 0 -50px;
		position: absolute;
		left: 40%;
		top: 40%;
		z-index: 6;
	}
	.circle-g {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(212,79,13,0) 30%,rgba(212,79,13, 0.15) 100%);
		border-radius: 30px;
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
		position: absolute;
		left: 58%;
		top: 58%;
		z-index: 6;
	}
	.circle-h {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(24,62,173,0) 10%, rgba(24,62,173,0.1) 60%);
		border-radius: 75px;
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
		position: absolute;
		left: 41.5%;
		top: 41.5%;
		z-index: 7;
	}
	.circle-i {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(250,250,250,0.5) 0%,rgba(250,250,250, 0) 65%);
		border-radius: 15px;
		width: 30px;
		height: 30px;
		margin: -15px 0 0 -15px;
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 8;
	}
	.circle-j {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(250,250,250,0.8) 5%,rgba(250,250,250, 0) 65%);
		border-radius: 10px;
		width: 20px;
		height: 20px;
		margin: -10px 0 0 -10px;
		position: absolute;
		left: 10%;
		top: 10%;
		z-index: 9;
	}
	.circle-k {
		background: radial-gradient(50% 50%, circle closest-corner, rgba(212,79,13,0) 30%,rgba(212,79,13, 0.1) 100%);
		border-radius: 85px;
		width: 190px;
		height: 190px;
		margin: -85px 0 0 -85px;
		position: absolute;
		left: 53%;
		top: 53%;
		z-index: 10;
	}
	</style>

</head>

<body>

	<div class="lens-flare">

		<div class="circle-a"></div>
		<div class="circle-b"></div>
		<div class="circle-c"></div>
		<div class="circle-d"></div>
		<div class="circle-e"></div>
		<div class="circle-f"></div>
		<div class="circle-g"></div>
		<div class="circle-h"></div>
		<div class="circle-i"></div>
		<div class="circle-j"></div>
		<div class="circle-k"></div>

	</div>

	<script src="prefixfree.min.js" type="text/javascript"></script>

</body>
</html>