Untitled

dabblet.css

body {   
    font: 100.1% "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #636467;
    line-height: 1.8em;
	background: #333;
}

#box {
	width: 220px;
	height:220px;
	margin: 0 auto;
	margin-top: 100px;
	padding: 5px;
	overflow:hidden !important;
	border-radius: 20px;
	background-clip: padding-box;
	background-origin: padding-box;	
	border: 0px;
	position: relative;
}
	#box .shadow {
		background: linear-gradient(to right,  rgba(182,224,38,0) 0%,rgba(171,220,40,1) 100%); /* W3C */
		width: 310px;
		height: 310px;	
		margin-top: -50px;
		margin-left: -50px;		
		position:relative;		
		display: block;
	}
	
	#box .innerWrap {
		background:#CCC;
		width: 100%;
		height: 100%;	
		border-radius:20px;		
		position:relative;
		z-index: 100;
	}

		#box .innerWrap > div {
			padding: 10px;
		}

dabblet.html

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://youpivot.googlecode.com/svn-history/r83/trunk/chromeextension2/include/jquery_rotate.js"></script>
<div id="box">
	<div class="innerWrap">
     	<div>a simple Box</div>
    </div>    
    <div class="shadow"></div>
</div>

dabblet.js

$('#box .shadow').animate({'rotate':-900},3000);

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}