<div class="clock-board">
<div class="neumorphic-clock">
<div class="clock-face">
<div class="center-dot"></div>
<div class="hand hour-hand" id="hour"></div>
<div class="hand minute-hand" id="minute"></div>
<div class="hand second-hand" id="second"></div>
<!-- Clock markers -->
<div class="marker marker-12"></div>
<div class="marker marker-3"></div>
<div class="marker marker-6"></div>
<div class="marker marker-9"></div>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #e0e5ec;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.clock-board {
display: flex;
justify-content: center;
align-items: center;
}
.neumorphic-clock {
width: 320px;
height: 320px;
background: #e0e5ec;
border-radius: 50%;
box-shadow: 14px 14px 28px rgba(163, 177, 198, 0.6), -14px -14px 28px rgba(255, 255, 255, 0.7);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: #e0e5ec;
box-shadow: inset 8px 8px 16px rgba(163, 177, 198, 0.5), inset -8px -8px 16px rgba(255, 255, 255, 0.6);
}
.center-dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #3b82f6;
border-radius: 50%;
z-index: 10;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 4px solid #e0e5ec;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
transition: transform 0.05s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
.hour-hand {
width: 8px;
height: 80px;
background: #374151;
margin-left: -4px;
z-index: 3;
}
.minute-hand {
width: 6px;
height: 110px;
background: #6b7280;
margin-left: -3px;
z-index: 4;
}
.second-hand {
width: 2px;
height: 130px;
background: #ef4444;
margin-left: -1px;
z-index: 5;
}
.second-hand::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 20px;
background: #ef4444;
border-radius: 10px;
}
.marker {
position: absolute;
background: #9ca3af;
border-radius: 4px;
}
.marker-12 { top: 10px; left: 50%; transform: translateX(-50%); width: 6px; height: 16px; }
.marker-6 { bottom: 10px; left: 50%; transform: translateX(-50%); width: 6px; height: 16px; }
.marker-3 { right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 6px; }
.marker-9 { left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 6px; }
const hrHand = document.getElementById("hour");
const minHand = document.getElementById("minute");
const secHand = document.getElementById("second");
function updateClock() {
const date = new Date();
const sec = date.getSeconds();
const min = date.getMinutes();
const hr = date.getHours();
// Calculate degrees
const secDeg = sec * 6; // 360 / 60
const minDeg = (min * 6) + (sec * 0.1); // add slight movement based on seconds
const hrDeg = (hr * 30) + (min * 0.5); // add slight movement based on minutes
// Update CSS rotation
secHand.style.transform = "rotate(" + secDeg + "deg)";
minHand.style.transform = "rotate(" + minDeg + "deg)";
hrHand.style.transform = "rotate(" + hrDeg + "deg)";
}
setInterval(updateClock, 1000);
updateClock();
