CodePen

HTML

            
              <div class="wrapper">
  <div class="hand hour"></div>
  <div class="hand minute"></div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * { box-sizing: border-box; }

body { background: #cdc9c6; }

.wrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 55px auto;
  background: inherit;
  font-size: 150px;
  box-shadow: 
    inset 5px 5px 10px rgba(0,0,0,0.3),
    inset 15px 15px 2px rgba(0,0,0,0.1);
}

.wrapper:after,
.wrapper:before {
 	content: "";
  position: absolute;
  border-radius: inherit;
}

.wrapper:before {
 	left:  -15px;
  right: -15px;
  top:   -15px;
  bottom:-15px;
  background: linear-gradient(135deg, #a6a5a3, #cccbc9);
  background: -webkit-linear-gradient(-45deg, #a6a5a3, #cccbc9);
  z-index: -1;
  
}

.wrapper:after {
 	left:  -30px;
  right: -30px;
  top:   -30px;
  bottom:-30px;
  background: linear-gradient(135deg, #f3f3f3, #7d7976);
  background: -webkit-linear-gradient(-45deg, #f3f3f3, #7d7976);
  z-index: -2;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.5),
    6px 6px 8px rgba(0,0,0,0.25),
    15px 15px 2px rgba(0,0,0,0.12);
}

.hand {
 	width: 1px;
  height: 50%;
  position: absolute;
  left: 50%;
  transform-origin: bottom center;
  background: #fff;
}

.hand:after {
 	content: "";
  position: absolute;
  width: 8px;
  height: 100%;
  left: 50%;
  margin-left: -4px;
  border-radius: 50%;
}

.minute:after {
  background: linear-gradient(#d4e1f2, rgba(255,255,255,0) 75%);
  box-shadow: 0 -3px 3px #d4e1f2;
}

.minute {
 	 background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0) 70%);
}

.hour {
  background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0) 45%);
  box-shadow: 0 0 5px pink;
}

.hour:after {
  background: linear-gradient(#e2c3ee, rgba(255,255,255,0) 45%);
  box-shadow: 0 -3px 3px #e2c3ee;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){
  
	setInterval( function() {
    var hours = new Date().getHours();
    var mins = new Date().getMinutes();
    var hdegree = hours * 30 + (mins / 2);
    var hrotate = "rotate(" + hdegree + "deg)";
    
    $(".hour").css({
      "-webkit-transform" : hrotate,
      "-moz-transform" : hrotate,
      "-ms-transform" : hrotate,
      "-o-transform" : hrotate,
      "transform" : hrotate
    });
    
  }, 1000 );
      
  setInterval( function() {
    var mins = new Date().getMinutes();
    var mdegree = mins * 6;
    var mrotate = "rotate(" + mdegree + "deg)";
    
    $(".minute").css({
      "-webkit-transform" : mrotate,
      "-moz-transform" : mrotate,
      "-ms-transform" : mrotate,
      "-o-transform" : mrotate,
      "transform" : mrotate
    });
    
  }, 1000 );
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................