The first commented line is your dabblet’s title

dabblet.css

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

body {
    background-color:#cecece;
    background-image:url(http://subtlepatterns.com/patterns/textured_paper.png);
}
div {
   background: rgba(0,0,0,0.5);
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 10px ;
   display:inline-block;
   height: 100px;
   margin: 10px;
   padding: 0;
   width: 100px;
}
div#id01 {
   box-shadow: 
        0 2px 6px rgba(0,0,0,0.5), 
        inset 0 1px rgba(255,255,255,0.3), 
        inset 10px 10px 5px rgba(255,255,255,0.2), 
        inset 10px 10px 20px rgba(255,255,255,0.25), 
        inset 0px -10px 20px rgba(0,0,0,0.5); 
}
div#id02 {
   background: rgba(0,0,125,0.5);
   box-shadow: 
        0 2px 6px rgba(0,0,0,0.5), 
        /* inset 0 1px rgba(255,255,255,0.3), */ 
        inset 0 10px rgba(255,255,255,0.2), 
        inset 0 10px 20px rgba(255,255,255,0.25), 
        inset 0 -15px 30px rgba(0,0,0,0.3);
}
div#id03 {
   background: rgba(125,0,0,0.5);   box-shadow: 
        0 2px 6px rgba(0,0,0,0.5), 
        inset 0 1px rgba(255,255,255,0.3), 
        inset 10px 10px 5px rgba(255,255,255,0.2), 
        inset 10px 10px 20px rgba(255,255,255,0.25), 
        inset -10px -10px 20px rgba(0,0,0,0.3); 
}
div#id04 {
   background: rgba(0,125,0,0.5);
   box-shadow: 
        0 2px 6px rgba(0,0,0,0.5), 
        inset 0 1px rgba(255,255,255,0.3), 
        inset 4px 4px 8px rgba(255,255,255,0.5), 
        inset 10px 10px 5px rgba(255,255,255,0.2),
        inset 10px 10px 20px rgba(255,255,255,0.2), 
        inset -10px -10px 20px rgba(0,0,0,0.3), 
        inset -4px -4px 8px rgba(0,0,0,0.3); 
}

dabblet.html

<div id="id01"></div>
<div id="id02"></div>
<div id="id03"></div>
<div id="id04"></div>

dabblet.js

// alert('Hello world!');

settings.json

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