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: #77a8cd;
	background: -webkit-radial-gradient(#77a8cd,#133a55);

}

.icon {
	width:116px;
	height:116px;
	background:linear-gradient(#BFBFC2, #9FA0A4);
	border-radius:16px;
	
	box-shadow:
	0 0 0 1px rgba(0,0,0,0.2),
	0 2px 3px 0 rgba(19, 58, 85, 0.6),
	inset 0 -21px 0 0 rgba(0,0,0,0.39),
	inset 0 -22px 0 0 rgba(255,255,255,0.4);
	
	background-clip:padding-box;
	
	top:50%;
	left:50%;
	margin:93px 42px;
	position:relative;
	z-index:99;
}

.icon:before {
	content:'';
	display:block;
	width:25px;
	height:14px;
	box-shadow:
	inset 0 1px 0 0 rgba(255,255,255,0.2),
	inset 0 -2px 0 0 rgba(255,255,255,0.5),
	0 2px 0 0 rgba(255,255,255,0.3);
	border:25px solid rgba(0,0,0,0.01);
	background:transparent;
	border-radius:100%;
	position:absolute;
	bottom:30px;
	margin:0 -38px 0 0;
	right:50%;
}

.icon:after {
	content:'';
	display:block;
	width:4px;
	height:4px;
	box-shadow:
	0 1px 2px 0 rgba(0,0,0,0.6),
	inset 0 0 0 1px rgba(0,0,0,0.2),
	inset 0 2px 0 0 rgba(255,255,255,0.7),
	0 -1px 0 1px rgba(0,0,0,0.4);
	background:#FEF935;
	border-radius:10px;
	position:absolute;
	bottom:7px;
	right:20px;
}

.wrapper {
left:50%;top:50%;position:absolute;margin:-200px -150px;
}

dabblet.html

<div class="wrapper">

<div class="icon"></div>

</div>

<img src="htt://cl.ly/image/0F3S38003f2w/safari.png" style="left:50%;top:50%;position:absolute;margin:-200px -150px;">

settings.json

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