cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head>
<meta charset="UTF-8">
<title>CSS3 pokemon ball</title>
</head>

<body>
<h1>CSS3 pokemon ball</h1>
<h1>by Amos 2013-12-15</h1>
<div class="box"></div>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>


</body>
</html>

            
          
!
            
              html,body{ width:100%; height:100%; margin: auto; padding:0; text-align:center; background-color:#FFF;}
.box{
	width: 200px;
	height: 200px;
	display:inline-block;
	margin:20px;
	position: relative;
	border: 6px solid #ccc;
	border-radius: 50%;
	background-image: -moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%), -moz-linear-gradient(-90deg, #f33 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%);
	background-image: -webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg, #f33 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%);
}
.box1{
	background-image: -moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-moz-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-moz-linear-gradient(0deg,#F79905 45%, #333 45%, #3f3f3f 50%, #333 55%, #F79905 55%);
	background-image: -webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-webkit-linear-gradient(0deg,#F79905 45%, #333 45%, #3f3f3f 50%, #333 55%, #F79905 55%);
}
.box:before{
	content: "";
	display: block;
	position: absolute;
	z-index: 6;
	width: 20%;	
	height: 20%;
	background-color: #FFF;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #AAA, 0 0 0 10px #fff, 0 0 0 16px #3f3f3f;
	margin: 40%;
}
.box:after{
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: 94%;
	height: 10%;
	background-color:rgba(0,0,0,0);
	margin: 45% 3%;
	box-shadow: 12px 0 0 #FFF, -12px 0 0 #FFF;
}


.box2{
	background-image: -moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-moz-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-moz-linear-gradient(20deg,rgba(0,94,153,1) 45%, rgba(0,94,153,0) 45%),-moz-linear-gradient(-20deg,rgba(0,94,153,0) 55%, rgba(0,94,153,1) 55%),-moz-linear-gradient(-90deg,rgba(244,46,37,1) 5%, rgba(244,46,37,0) 5%,rgba(244,46,37,0) 29%,rgba(244,46,37,1) 29%),-moz-linear-gradient(0deg,rgba(244,46,37,1) 40%,rgba(255,255,0,1) 40%,rgba(255,255,0,1) 44%,rgba(244,46,37,1) 44%,rgba(244,46,37,1) 48%,rgba(255,255,0,1) 48%,rgba(255,255,0,1) 52%,rgba(244,46,37,1) 52%,rgba(244,46,37,1) 56%,rgba(255,255,0,1) 56%,rgba(255,255,0,1) 60%,rgba(244,46,37,1) 60% );
	background-image: -webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-webkit-linear-gradient(20deg,rgba(0,94,153,1) 45%, rgba(0,94,153,0) 45%),
					  -webkit-linear-gradient(-20deg,rgba(0,94,153,0) 55%, rgba(0,94,153,1) 55%),-webkit-linear-gradient(-90deg,rgba(244,46,37,1) 5%, rgba(244,46,37,0) 5%,rgba(244,46,37,0) 29%,rgba(244,46,37,1) 29%),-webkit-linear-gradient(0deg,rgba(244,46,37,1) 40%,rgba(255,255,0,1) 40%,rgba(255,255,0,1) 44%,rgba(244,46,37,1) 44%,rgba(244,46,37,1) 48%,rgba(255,255,0,1) 48%,rgba(255,255,0,1) 52%,rgba(244,46,37,1) 52%,rgba(244,46,37,1) 56%,rgba(255,255,0,1) 56%,rgba(255,255,0,1) 60%,rgba(244,46,37,1) 60% );
}
.box3{
	background-color:#69C;
	background-image: -moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-moz-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-moz-linear-gradient(20deg,rgba(115,33,93,1) 45%, rgba(115,33,93,0) 45%),-moz-linear-gradient(-20deg,rgba(115,33,93,0) 55%, rgba(115,33,93,1) 55%),-moz-linear-gradient(-25deg,rgba(255,94,153,1) 35%, rgba(255,94,153,0) 35%),-moz-linear-gradient(25deg,rgba(255,94,153,0) 65%, rgba(255,94,153,1) 65%),-moz-linear-gradient(25deg,rgba(247,153,5,0) 62%, rgba(247,153,5,1) 62%),-moz-linear-gradient(-25deg,rgba(247,153,5,1) 38%, rgba(247,153,5,0) 38%);
	background-image: -webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-webkit-linear-gradient(20deg,rgba(115,33,93,1) 45%, rgba(115,33,93,0) 45%),-webkit-linear-gradient(-20deg,rgba(115,33,93,0) 55%, rgba(115,33,93,1) 55%),-webkit-linear-gradient(-25deg,rgba(255,94,153,1) 35%, rgba(255,94,153,0) 35%),-webkit-linear-gradient(25deg,rgba(255,94,153,0) 65%, rgba(255,94,153,1) 65%),-webkit-linear-gradient(25deg,rgba(247,153,5,0) 62%, rgba(247,153,5,1) 62%),-webkit-linear-gradient(-25deg,rgba(247,153,5,1) 38%, rgba(247,153,5,0) 38%);
}
.box4{
	background-image:-moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-moz-linear-gradient(-90deg, rgba(0,0,0,0) 45%, #3F5779 45%, #3F5779 55%, rgba(0,0,0,0) 55%),-moz-radial-gradient(left center,circle,rgba(0,0,0,1) 40px,rgba(254,199,11,1) 40px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px),-moz-radial-gradient(right center,circle,rgba(0,0,0,1) 40px,rgba(254,199,11,1) 40px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px),-moz-linear-gradient(-90deg, rgba(0,0,0,1) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%);
	background-image:-webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg, rgba(0,0,0,0) 45%, #3F5779 45%, #3F5779 55%, rgba(0,0,0,0) 55%),-webkit-radial-gradient(left center,circle,rgba(0,0,0,1) 40px,rgba(254,199,11,1) 40px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px),-webkit-radial-gradient(right center,circle,rgba(0,0,0,1) 40px,rgba(254,199,11,1) 40px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px),-webkit-linear-gradient(-90deg, rgba(0,0,0,1) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%);}
.box5{
	background-color:#000;
	background-image:-moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-moz-linear-gradient(-90deg, rgba(0,0,0,0) 45%, #3F5779 45%, #3F5779 55%, rgba(0,0,0,0) 55%),-moz-linear-gradient(45deg, rgba(248,223,87,0) 45%,rgba(248,223,87,1) 45%,rgba(248,223,87,1) 55%,rgba(248,223,87,0) 55%),-moz-linear-gradient(-45deg, rgba(248,223,87,0) 45%,rgba(248,223,87,1) 45%,rgba(248,223,87,1) 55%,rgba(248,223,87,0) 55%),-moz-linear-gradient(45deg, rgba(74,109,204,0) 35%,rgba(74,109,204,1) 35%,rgba(74,109,204,1) 65%,rgba(74,109,204,0) 65%),-moz-linear-gradient(-45deg, rgba(74,109,204,0) 35%,rgba(74,109,204,1) 35%,rgba(74,109,204,1) 65%,rgba(74,109,204,0) 65%),-moz-linear-gradient(90deg, rgba(248,223,87,0) 80%,rgba(248,223,87,1) 80%);

	background-image:-webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg, rgba(0,0,0,0) 45%, #3F5779 45%, #3F5779 55%, rgba(0,0,0,0) 55%),-webkit-linear-gradient(45deg, rgba(248,223,87,0) 45%,rgba(248,223,87,1) 45%,rgba(248,223,87,1) 55%,rgba(248,223,87,0) 55%),-webkit-linear-gradient(-45deg, rgba(248,223,87,0) 45%,rgba(248,223,87,1) 45%,rgba(248,223,87,1) 55%,rgba(248,223,87,0) 55%),-webkit-linear-gradient(45deg, rgba(74,109,204,0) 35%,rgba(74,109,204,1) 35%,rgba(74,109,204,1) 65%,rgba(74,109,204,0) 65%),-webkit-linear-gradient(-45deg, rgba(74,109,204,0) 35%,rgba(74,109,204,1) 35%,rgba(74,109,204,1) 65%,rgba(74,109,204,0) 65%),-webkit-linear-gradient(90deg, rgba(248,223,87,0) 80%,rgba(248,223,87,1) 80%);
}
.box6{
	background-image:-moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-moz-linear-gradient(-90deg, rgba(153,153,153,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, rgba(153,153,153,1) 55%),-moz-radial-gradient(10px 10px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-moz-radial-gradient(80px 30px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-moz-radial-gradient(100px -10px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-moz-radial-gradient(120px 100px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-moz-radial-gradient(30px 120px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-moz-radial-gradient(200px 130px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-moz-linear-gradient(-90deg, rgba(153,153,153,1) 45%, #333 45%, #3f3f3f 50%, #333 55%, rgba(153,153,153,0) 55%);

	background-image:-webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg, rgba(153,153,153,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, rgba(153,153,153,1) 55%),-webkit-radial-gradient(10px 10px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-webkit-radial-gradient(80px 30px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-webkit-radial-gradient(100px -10px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-webkit-radial-gradient(120px 100px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-webkit-radial-gradient(30px 120px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-webkit-radial-gradient(200px 130px,circle,rgba(254,199,11,0) 30px,rgba(254,199,11,0) 55px,rgba(254,199,11,1) 55px,rgba(254,199,11,1) 60px,rgba(254,199,11,0) 60px,rgba(254,199,11,0) 65px,rgba(254,199,11,1) 65px,rgba(254,199,11,1) 70px,rgba(254,199,11,0) 70px),-webkit-linear-gradient(-90deg, rgba(153,153,153,1) 45%, #333 45%, #3f3f3f 50%, #333 55%, rgba(153,153,153,0) 55%)
}
.box7{
	background-image:
		-moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),
		-moz-linear-gradient(-90deg, rgba(153,153,153,0) 45%, #F30 45%,#F50 50%, #F30 55%, rgba(153,153,153,0) 55%),
		-moz-radial-gradient(50% 0px,circle,rgba(70,70,70,1) 10px,rgba(70,70,70,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(20% 20px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(80% 20px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(20% 180px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(50% 200px,circle,rgba(255,255,255,1) 10px,rgba(255,255,255,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(80% 180px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(2% 72px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(98% 72px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(2% 127px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-radial-gradient(98% 127px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-moz-linear-gradient(-90deg,#F79905 50%,#333 50%);
	background-image:-webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg, rgba(153,153,153,0) 45%, #F30 45%,#F50 50%, #F30 55%, rgba(153,153,153,0) 55%),-webkit-radial-gradient(50% 0px,circle,rgba(70,70,70,1) 10px,rgba(70,70,70,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(20% 20px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(80% 20px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(20% 180px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(50% 200px,circle,rgba(255,255,255,1) 10px,rgba(255,255,255,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(80% 180px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(2% 72px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(98% 72px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(2% 127px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-radial-gradient(98% 127px,circle,rgba(254,199,11,1) 10px,rgba(254,199,11,0) 10px,rgba(254,199,11,0) 15px,rgba(254,199,11,1) 15px,rgba(254,199,11,1) 20px,rgba(254,199,11,0) 20px,rgba(254,199,11,0) 25px,rgba(254,199,11,1) 25px,rgba(254,199,11,1) 30px,rgba(254,199,11,0) 30px),-webkit-linear-gradient(-90deg,#F79905 50%,#333 50%);
}
.box8{
	background-size:cover,cover,45px 32px,50px 30px,40px 50px;
	background-image:-moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-moz-linear-gradient(-90deg, rgba(153,153,153,0) 45%, #F30 45%,#F50 50%, #F30 55%, rgba(153,153,153,0) 55%),-moz-radial-gradient(10px 10px,circle,rgba(70,70,70,1) 6px,rgba(70,70,70,0) 6px),-moz-radial-gradient(25px 25px,circle,rgba(70,70,70,1) 5px,rgba(70,70,70,0) 5px),-moz-radial-gradient(8px 40px,circle,rgba(70,70,70,1) 4px,rgba(70,70,70,0) 4px);
	background-image:-webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%,rgba(0,0,0,1) 100%),-webkit-linear-gradient(-90deg, rgba(153,153,153,0) 45%, #F30 45%,#F50 50%, #F30 55%, rgba(153,153,153,0) 55%),-webkit-radial-gradient(10px 10px,circle,rgba(70,70,70,1) 6px,rgba(70,70,70,0) 6px),-webkit-radial-gradient(25px 25px,circle,rgba(70,70,70,1) 5px,rgba(70,70,70,0) 5px),-webkit-radial-gradient(8px 40px,circle,rgba(70,70,70,1) 4px,rgba(70,70,70,0) 4px);
}
.box3:before{
	content: "";
	display: block;
	position: absolute;
	z-index: 6;
	width: 5%;	
	height: 5%;
	background-color:rgba(255,255,255,1);
	border-radius: 50%;
	box-shadow:0 0 0 15px #FFF, 0 0 0 16px #AAA, 0 0 0 23px #fff, 0 0 0 30px #3f3f3f,
				0 -42px 0 #FF0,0 -55px 0 #FF0;
	margin: 47%;
}
h1{
	font-family:Arial, Helvetica, sans-serif;
	height:40px;
	position:absolute;
	z-index:10;
	text-align:center;
	left:0;
	right:0;
	top:230px;
	bottom:0;
	margin:0;
	font-size:40px;
	color:#FFF;
	text-shadow:0 0 5px #000;}
h1+h1{top:490px; font-size:30px;}
.box:hover{ -webkit-animation:shak .3s infinite; -moz-animation:shak .3s infinite;}
@-webkit-keyframes shak{
	0%,100%{ -webkit-transform:rotate(-10deg);}
	50%{-webkit-transform:rotate(10deg);}
}
@-moz-keyframes shak{
	0%,100%{ -moz-transform:rotate(-10deg);}
	50%{-moz-transform:rotate(10deg);}
}
            
          
!
999px
Loading ..................

Console