Neumorphic Style Analog Clock

Category: Date & Time , Javascript | July 11, 2020
Views Total:3,819 views
Official Page:Go to website
Last Update:July 11, 2020


Neumorphic Style Analog Clock


A simple, Neumporphic style Analog clock (Dark & Light mode) built using plain JavaScript and CSS.

How to use it:

1. Load the core Stylesheet and JavaScript in the document.

<link rel="stylesheet" href="CSS/main.css" />
<script src="JS/main.js"></script>

2. Create the HTML for the analog clock.

<div class="clock">
  <div class="hour">
    <div class="hr" id="hr">
  <div class="min">
    <div class="mn" id="mn">
  <div class="sec">
    <div class="sc" id="sc">

3. Create a toggle element to switch between Dark & Light mode.

<div class="toggleClass" onclick="toggleClass()"></div>

You Might Be Interested In:

One thought on “Neumorphic Style Analog Clock

  1. Pranav Suresh Bakare

    Best explanation I am Looking for exactly same one thank you keep sharing!!!!!!!!!!!!!!!!!


Leave a Reply