Analog Clock in CSS with Date and Time

Do you need to create an analog clock with date and time using HTML and CSS? Well, you are in the right place. Here we are going to create an analog clock widget in CSS and functionalize it using JavaScript. You can check out the final output on the demo page to see the clock in action.

As you have seen on the above preview image/demo page, the clock elements purely created using HTML & CSS. So, there is no image/SVG/canvas behind the clock. All these components (clock dial, hands, dots, etc) are based on HTML div tags and CSS styles & transformations.

You can implement this clock widget in any standard HTML pages to display the date and time. Besides this, you can also customize each component of the clock by modifying CSS values. Like, you can set the custom dial size, background color, hands thickness, and do many more changes according to your needs. Also, check this digital clock widget if you want to display only time in digits.

The HTML Structure

In HTML, create a div element with a class name "clock" and create div tags for the day, date, clock hands, hours, and dial lines inside it. So, the complete HTML structure for the clock is as follows:

<div class="clock">
  <div>
    <div class="info date"></div>
    <div class="info day"></div>
  </div>
  <div class="dot"></div>
  <div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
  <div>
    <span class="h3">3</span>
    <span class="h6">6</span>
    <span class="h9">9</span>
    <span class="h12">12</span>
  </div>
  <div class="diallines"></div>
</div>

Styling Analog Clock with CSS

The "clock" class is the main container for the clock. Define the same value for the height and width (300px) and set 50% value for the border-radius property in order to make it circular. Here the important thing is that you need to set its position relative (as its child elements are absolute). Likewise, define the background color, border, and box-shadow as described below:

.clock {
  background: #ececec;
  width: 300px;
  height: 300px;
  margin: 8% auto 0;
  border-radius: 50%;
  border: 14px solid #333;
  position: relative;
  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}

After that, target the "dot" class that is the center of the clock. Set 50% border-radius and specify  14px value for both the width and height. Similarly, set the 0 value for all directions along with the absolute position. Define the box-shadow and background color as mentioned in the following snippet:

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 10;
  box-shadow: 0 2px 4px -1px black;
}

In order to arrange 3, 6, 9  and 12 hours in a circle, we need some helper classes. Each class contains a specific position value.

.h12 {
  top: 30px;
  left: 50%;
  margin-left: -9px;
}
.h3 {
  top: 140px;
  right: 30px;
}
.h6 {
  bottom: 30px;
  left: 50%;
  margin-left: -5px;
}
.h9 {
  left: 32px;
  top: 140px;
}

Specify the CSS styles for the dial lines that indicate each second of the clock. Define 2px width and 15px height, set the background color and 50% 150px transform-origin.

.diallines {
  position: absolute;
  z-index: 2;
  width: 2px;
  height: 15px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}
.diallines:nth-of-type(5n) {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 25px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}

The "info" class is the container for the day and date. Keep its absolute position, set width, height, and other CSS properties as described below:

.info {
  position: absolute;
  width: 120px;
  height: 20px;
  border-radius: 7px;
  background: #ccc;
  text-align: center;
  line-height: 20px;
  color: #000;
  font-size: 11px;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  font-family: "Poiret One";
  font-weight: 700;
  z-index: 3;
  letter-spacing: 3px;
  margin-left: -60px;
  left: 50%;
}

We have also special classes for the day and date to adjust their position. So, set the date to the top with 80px value and day keep 200px top value (it will go bottom).

.date {
    top: 80px;
  }
.day {
    top: 200px;
}

CSS Styles for Hands of Analog Clock

Now, define CSS styles for the clock hands. The very first is the hour-hand that is smaller than other hands. So, define its 65px width along with the 4px width (thickness). Define the background-color and 50% 72px transform-origin.

.hour-hand {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 65px;
  background: #333;
  top: 79px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

Similarly, define the styles for the minute-hand. The styles are quite similar to the hours-hand, you just need to increase the height as compared to hour-hand.

.minute-hand {
  position: absolute;
  z-index: 6;
  width: 4px;
  height: 100px;
  background: #666;
  top: 46px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 105px;
}

Likewise, specify styles for the second-hand. You can set the custom value for the background to make this hand a little bit different from the hours and minutes hand.

.second-hand {
  position: absolute;
  z-index: 7;
  width: 2px;
  height: 120px;
  background: gold;
  top: 26px;
  lefT: 50%;
  margin-left: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 125px;
}

Analog Clock JavaScript Function

We have a complete static clock after creating HTML and CSS for it. Now it’s time to functionalize the clock to show day, date, and time in a realistic way. So, add the following JavaScript clock function into your project and done!

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];

for (var i = 1; i < 60; i++) {
  clockEl.innerHTML += "<div class='diallines'></div>";
  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}

function clock() {
  var weekday = new Array(7),
      d = new Date(),
      h = d.getHours(),
      m = d.getMinutes(),
      s = d.getSeconds(),
      date = d.getDate(),
      month = d.getMonth() + 1,
      year = d.getFullYear(),
           
      hDeg = h * 30 + m * (360/720),
      mDeg = m * 6 + s * (360/3600),
      sDeg = s * 6,
      
      hEl = document.querySelector('.hour-hand'),
      mEl = document.querySelector('.minute-hand'),
      sEl = document.querySelector('.second-hand'),
      dateEl = document.querySelector('.date'),
      dayEl = document.querySelector('.day');

      weekday[0] = "Sunday";
      weekday[1] = "Monday";
      weekday[2] = "Tuesday";
      weekday[3] = "Wednesday";
      weekday[4] = "Thursday";
      weekday[5] = "Friday";
      weekday[6] = "Saturday";
  
      var day = weekday[d.getDay()];
  
  if(month < 9) {
    month = "0" + month;
  }
  
  hEl.style.transform = "rotate("+hDeg+"deg)";
  mEl.style.transform = "rotate("+mDeg+"deg)";
  sEl.style.transform = "rotate("+sDeg+"deg)";
  dateEl.innerHTML = date+"/"+month+"/"+year;
  dayEl.innerHTML = day;
}

setInterval("clock()", 100);

That’s all! I hope you have successfully created an analog clock with date and time in CSS. If you have any questions or suggestions, let me know by comment below.