The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

html, body {
	min-height: 100%;
	overflow:hidden;
	height:100%;
 }
 
html {
	background:radial-gradient(#fff,#eee);
	/*background: #77a8cd;*/
	/*background:radial-gradient(#77a8cd, #133a55);*/
}

body {
	word-wrap: break-word; 
	font: normal normal normal 16px/24px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #555;
	outline: 0;
	vertical-align: baseline;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
	-moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	text-rendering:optimizeLegibility;
}

.icon {
	width:116px;
	height:116px;
	border-radius:16px;
	background:#ccc;
	box-shadow:
	
	/* Dropshadow */
	0 1px 0px 0 rgba(85, 85, 85, 0.9),
	0 1px 3px 0 rgba(85, 85, 85, 0.9),

	
	/* Border */
	inset 0 -1px 0 0 rgba(0,0,0,0.2),
	0 0 0 1px rgba(0,0,0,0.2),
	
	/* Side Shadows */	
	inset 1px 70px 2px 0 #676767,
	inset 3px 70px 3px 0 #898989,
	inset -1px 70px 2px 0 #676767,
	inset -3px 70px 3px 0 #898989,

	/* Side Highlights */
	inset 8px 70px 7px 0 #eae9e9,
	inset 20px 70px 40px 0 #e1e1e1,
	inset -8px 70px 7px 0 #eae9e9,
	inset -20px 70px 30px 0 #bbb,
	
	/* Darker Side */
	inset 0 -20px 0 0 #c3c3c3;
	
	-webkit-background-clip:content-box;
	-moz-background-clip:content-box;
	background-clip:content-box;
	
	top:50%;
	left:50%;
	margin:93px 42px;
	position:relative;
}

/* Top Plate */
.icon:before {
	background:
	radial-gradient(top, transparent,rgba(0,0,0,0.01) 90%),
	radial-gradient(#FDFCFB,#DADADA);
	box-shadow:
	/* Highlight */
	0 1px 0 0 rgba(255,255,255,0.9),
	0 2px 0 0 rgba(0,0,0,0.03);
	content:'';
	display:block;
	width:116px;
	height:96px;
	border-radius:16px;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-58px;
}

/* Infra Red Sensor */
.icon:after {
	content:'';
	display:block;
	width:3px;
	height:3px;
	box-shadow:
	inset 0 1px 0 0 rgba(191, 191, 191, 0.2),
	inset 0 -1px 0 0 rgba(191, 191, 191, 0.2),
	inset 1px 0 0 0 rgba(191, 191, 191, 0.2),
	inset -1px 0 0 0 rgba(191, 191, 191, 0.2),
	0 1px 0 0 rgba(255, 255, 255, 0.2);
	background:#27262B;
	border-radius:100%;
	position:absolute;
	bottom:13px;
	right:18px;
}

.icon p {
	line-height:100px;
	transform: rotateX(30deg);
	-webkit-transform-style:preserve-3d;
	font-size: 36px; 
	text-align:center;
	background: -webkit-linear-gradient(#494A50,#111112);
	background: -moz-linear-gradient(#494A50,#111112);
	background: -o-linear-gradient(#494A50,#111112);
	background: -ms-linear-gradient(#494A50,#111112);
	background: linear-gradient(#494A50,#111112);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.wrapper {
left:50%;top:50%;position:absolute;margin:-200px -150px;
}

dabblet.html

<div class="wrapper">
<div class="icon"><p></p></div>
</div>

settings.json

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