Untitled

dabblet.css

.frame
{
	position: relative;
	
	height: 500px;
	
	background: linear-gradient(bottom, #f7f5e8, #a2cce7);
	border-bottom: 4px solid orange
}

.frame .front
{
	position: absolute;
	left: 55%;
	bottom: 15px;
	z-index: 3;
	
	
	width: 400px;
	height: 200px;
	
	border-radius: 200px;
	box-shadow: inset -10px -10px 880px rgb(239,148,227), 0 0 63px rgb(239,148,227), 0 0 63px rgb(239,148,227);
}

.frame .front:before,
.frame .front:after
{
	position: inherit;
	width: inherit;
	height: inherit;
	
	border-radius: inherit;
	
	content: "";
}

.frame .front:before
{
	left: -150%;
	bottom: 35%;

	box-shadow: inset -10px -10px 880px rgb(100,148,227), 0 0 63px rgb(100,148,227), 0 0 63px rgb(100,148,227);



}

.frame .front:after
{
	left: -400%;
	bottom: 60%;

	box-shadow: inset -10px -10px 880px rgb(300,190,32), 0 0 3px rgba(176,145,189,0.75);
}

.frame .main
{
	position: absolute;
	left: 75%;
	bottom: 95px;
	
	
	width: 200px;
	height: 200px;
	
	border-radius: 200px;
	box-shadow: inset -10px -10px 880px rgb(239,148,227), 0 0 3px rgba(176,145,189,0.75)
}

.frame .main:before,
.frame .main:after
{
	position: inherit;
	width: inherit;
	height: inherit;
	
	border-radius: inherit;
	
	content: "";
}

.frame .main:before
{
	left: -300%;
	bottom: 125%;

	box-shadow: inset -10px -10px 880px rgb(100,148,227), 0 0 3px rgba(176,145,189,0.75)
}

.frame .main:after
{
	left: -400%;
	bottom: 60%;

	box-shadow: inset -10px -10px 880px rgb(300,190,32), 0 0 3px rgba(176,145,189,0.75)
}

dabblet.html

<div class="frame">
	<div class="front">
		<div class="scene"></div>
	</div>
	<div class="main">
		<div class="scene"></div>
	</div>
	<div class="back">
		<div class="scene"></div>
	</div>
</div>

settings.json

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