Circles (Box Shadow)

dabblet.css

/**
 * Circles (Box Shadow)
 */

body {
	font:18px/1.3 "Helvetica Neue", sans-serif;
}
p {
	clear:both;
	margin: 50px 0;
}
div {
	width:150px;
	display:inline-block;
	height:150px;
	border-radius:75px;
	margin:20px 50px;
}
#circle1 {
	background-color:#86c100;
	box-shadow:0 40px 15px -15px rgba(0, 0, 0, 0.2), inset 0 -50px 20px -20px rgba(0, 0, 0, 0.2);
}
#circle2 {
	background-color:#96d110;
	box-shadow:15px 30px 20px -10px rgba(0, 0, 0, 0.4), inset -20px -40px 40px 30px rgba(0, 0, 0, 0.4);
}

dabblet.html

<div id="circle1"></div>
<div id="circle2"></div>

<p>Mais exemplos de <a href="http://viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows">Box Shadow</a></p>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}