<style type="text/css">
/*<![CDATA[*/
#clock {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -200px;
    width: 400px;
    height: 230px;
     
    background: -moz-linear-gradient(top,  #000,  #121212);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#121212));
    -moz-box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
    -webkit-box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
    box-shadow: 5px 5px 30px rgba(200, 200, 200, .07), 0 -5px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .25);
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    border-radius: 26px;
}
 
#clock:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 200;
    top: 90px;
    left: 9px;
    width: 3px;
    height: 50px;
     
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
    border: 1px solid #000;
    -moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
    -webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
    box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}
 
#clock:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 200;
    top: 90px;
    right: 9px;
    width: 3px;
    height: 50px;
     
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
    border: 1px solid #000;
    -moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
    -webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
    box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}
 
#hour,
#minute {
    width: 190px;
    height: 193px;
    padding-top: 17px;
    overflow: hidden;
     
    background: #333;
    background: -moz-linear-gradient(top -80deg,  #383838, #111 50%, #363636);
    background: -webkit-gradient(linear, 30% top, 70% bottom, from(#383838), color-stop(.5, #111), to(#363636));
     
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, 0 3px 0 rgba(255, 255, 255, .2) inset, 0 5px 0 rgba(0, 0, 0, .75) inset, 0 6px 0 rgba(255, 255, 255, .2) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 -2px 0 #000 inset, 0 -3px 0 rgba(255, 255, 255, .18) inset, 0 -5px 0 #000 inset, 0 -6px 0 rgba(255, 255, 255, .08) inset, 0 0 30px rgba(0, 0, 0, .3) inset;
     
    font-size: 130px;
    font-family: 'Black Ops One', cursive;
    color: #fff;
    text-align: center;
    letter-spacing: -20px;
    line-height: 171px;
}
 
#hour {
    position: absolute;
    top: 10px;
    left: 9px;
     
    -moz-border-radius: 24px 0 0 24px;
    -webkit-border-radius: 24px 0 0 24px;
    border-radius: 24px 0 0 24px;
    border-right: 1px solid #000;
    text-indent: -10px;
}
 
#minute {
    position: absolute;
    top: 10px;
    left: 200px;
     
    -moz-border-radius: 0 24px 24px 0;
    -webkit-border-radius: 0 24px 24px 0;
    border-radius: 0 24px 24px 0;
    text-indent: -30px;
}
 
#hour:before,
#minute:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 190px;
    height: 105px;
     
    background: -moz-linear-gradient(top,  rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .4));
    background: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .4)));
    border-bottom: 1px solid #000;
    -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
    -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, .04), 0 5px 100px rgba(255, 255, 255, .3);
     
    pointer-events: none;
}
 
#hour:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 100;
    top: 80px;
    right: 0px;
    width: 3px;
    height: 50px;
     
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
    border: 1px solid #000;
    -moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
    -webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
    box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1), 1px 1px 0 rgba(255, 255, 255, .06);
}
 
#minute:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 100;
    top: 80px;
    left: 0px;
    width: 3px;
    height: 50px;
     
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top,  #000, #424242 35%, #363636 52%, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(.35, #424242), color-stop(.52, #363636), to(#000));
    border: 1px solid #000;
    -moz-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
    -webkit-box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
    box-shadow: -1px -1px 0 rgba(0, 0, 0, .2), 1px 1px 0 rgba(255, 255, 255, .05) inset, 1px 0 10px rgba(0, 0, 0, 1);
}
/*]]>*/
</style>

<div id="clock">
    <div id="hour">
        20
    </div>

    <div id="minute">
        13
    </div>
</div>