dabblet.css

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

.circle-3d{
    position:relative;
    width:130px;
    height:130px;
    background:#222;
    Border-radius:50%;
    Margin:60px;
}
.circle-3d:before{
 Position:absolute;
 content:'';
 Left:-33px;top:-33px;bottom:-33px;right:-33px;
 Background:linear-gradient(90deg, #656565, #ccc);
 Border-radius:50%;
 Z-index:-2;
 Box-shadow:-30px 0  5px -2px #555;
}
.circle-3d:after{
Position:absolute;
Left:-13px;
Top:-13px;
Bottom:-13px;
Right:-13px;
Background:linear-gradient(270deg, #222, #bbb);
Content:'';
Border-radius:50%;
Z-index:-1;
}

body { background:#999; }

.radialgradientbg {
background: -moz-radial-gradient(center, ellipse cover,  #4c1113 0%, #16040a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c1113), color-stop(100%,#16040a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #4c1113 0%,#16040a 100%); /* Chrome10+,Safari5.1+ */
}

dabblet.html

<div class="circle-3d radialgradientbg"></div>

dabblet.js

// alert('Hello world!');

settings.json

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