* {
  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(#ffffff, rgba(255, 255, 255, 0) 70%);
}

.hour {
  background: linear-gradient(#ffffff, 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;
}