Neumorphism Style Analog Clock Icon In JavaScript And CSS

Preview:

Description:

A stylish Neumorphism-style analog clock app icon written in CSS/CSS3 and a little bit of JavaScript.

How to use it:

1. The required HTML structure for the analog clock.

<div class="clock">
  <div class="numbers">
    <span class="twelve"><b>12</b></span>
    <span class="three"><b>3</b></span>
    <span class="six"><b>6</b></span>
    <span class="nine"><b>9</b></span>
    <div class="time hrs"><i></i></div>
    <div class="time min"><i></i></div>
    <div class="time sec"><i></i></div>
  </div>
</div>

2. The necessary CSS styles. Copy and paste the following snippets in your project.

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  border-radius: 50px;
  background-color: #E5E0FF;
  cursor: pointer;
  position: relative;
  box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.15),
      inset 15px 15px 10px rgba(255, 255, 255, 0.75),
      -15px -15px 35px rgba(255, 255, 255, 0.55),
      inset -1px -1px 10px rgba(0, 0, 0, 0.2);
}
.clock::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #e91e63;
  z-index: 2;
  box-shadow: 0 0 0 1px #e91e63,
  0 0 0 3px #fff,
  0 0 5px 5px rgba(0, 0, 0, 0.15);
}
.clock .numbers {
  position: absolute;
  border-radius: 50%;
  background-color: #152b4a;
  top: 35px;
  left: 35px;
  bottom: 35px;
  right: 35px;
  box-shadow: 5px 5px 15px #152b4a,
      inset 5px 5px 5px rgba(255, 255, 255, 0.55),
      -6px -6px 10px rgba(255, 255, 255, 1);
}
span {
  position: absolute;
  text-align: center;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  color: #fff;
  font-size: 1.25em;
}
.twelve {
  /* Not Mandatory */
  transform: rotate(360deg);
}
.three {
  transform: rotate(90deg);
}
.six {
  transform: rotate(180deg);
}
.nine {
  transform: rotate(270deg);
}
b {
  font-weight: 700;
  display: block;
}
.three b {
  transform: rotate(-90deg);
}
.six b {
  transform: rotate(-180deg);
}
.nine b {
  transform: rotate(-270deg);
}
.clock .numbers::before {
  position: absolute;
  content: "";
  top: 35px;
  left: 35px;
  bottom: 35px;
  right: 35px;
  background: linear-gradient(#2196f3, #e91e63);
  border-radius: 50%;
  animation: rotateAnimation 2s linear infinite;
}
.clock .numbers::after {
  position: absolute;
  content: "";
  top: 38px;
  left: 38px;
  bottom: 38px;
  right: 38px;
  background: #152b4a;
  border-radius: 50%;
}
.time {
  position: absolute;
  top: 0;
  right: 0;;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.time i {
  position: absolute;
  width: 3px;
  background-color: #fff;
  height: 50%;
  transform-origin: bottom;
  transform: scaleY(0.55);
}
.hrs i {
  transform: scaleY(0.3);
  width: 4px;
}
.min i {
  transform: scaleY(0.45);
}
.sec i {
  width: 2px;
  transform: scaleY(0.55);
  background-color: #e91e63;
  box-shadow: 0 30px 0 #e91e63;
}
@keyframes rotateAnimation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

3. Update the clock using JavaScript.

const hours = document.querySelector(".hrs");
const minutes = document.querySelector(".min");
const seconds = document.querySelector(".sec");
function setTime() {
    let now = new Date();
    let hr = now.getHours() * 30;
    let min = now.getMinutes() * 6;
    let sec = now.getSeconds() * 6;
    hours.style.transform = `rotateZ(${hr+(min / 12)}deg)`;
    minutes.style.transform = `rotateZ(${min}deg)`;
    seconds.style.transform = `rotateZ(${sec}deg)`;
}
setInterval(setTime);