Modern Digital and Analog Combo Clock | HTML, CSS & JavaScript

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #0f2027, #203a43, #000);
  animation: bgPulse 6s infinite alternate;
}

@keyframes bgPulse {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.2); }
}

/* Container */
.container {
  display: flex;
  gap: 50px;
  align-items: center;
  padding: 40px;
  border-radius: 25px;
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 60px rgba(0,255,255,0.2);
}

/* SVG ring */
svg {
  position: absolute;
  width: 270px;
  height: 270px;
  transform: rotate(-90deg);
}

.progress {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 754;
  stroke-dashoffset: 754;
  stroke: url(#gradient);
  filter: drop-shadow(0 0 0px cyan)
          drop-shadow(0 0 0px cyan);
  transition: stroke-dashoffset 0.2s linear;
}

/* Clock */
.clock-wrapper {
  position: relative;
}

.clock {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  position: relative;
  box-shadow: inset 0 0 30px rgba(0,255,255,0.2),
              0 0 40px rgba(0,255,255,0.3);
}

/* Hands */
.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
}

.hour { width: 6px; height: 60px; background: cyan; }
.minute { width: 4px; height: 90px; background: #00ffcc; }
.second { width: 2px; height: 110px; background: #ff0055; }

/* Center */
.center {
  width: 10px;
  height: 10px;
  background: cyan;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Digital */
.digital {
  font-size: 48px;
  color: cyan;
  text-shadow: 0 0 20px cyan;
}

.date {
  color: #aaa;
  text-align: center;
  margin-top: 10px;
}

/* Particles */
.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
}

const ring = document.getElementById("ring");
const clock = document.getElementById("clock");
const circumference = 2 * Math.PI * 120;

let lastMinute = -1;

/* 🔥 Firework particles */
function createParticles() {
  for (let i = 0; i < 60; i++) {
    const p = document.createElement("div");
    p.className = "particle";

const colors = ["#00ffff", "#ff00ff", "#00ffcc", "#ffffff"];
    p.style.background = colors[Math.floor(Math.random()*colors.length)];

const angle = Math.random() * 2 * Math.PI;
    const distance = 100 + Math.random() * 60;

const x = Math.cos(angle) * distance;
    const y = Math.sin(angle) * distance;

p.style.left = "50%";
    p.style.top = "50%";

clock.appendChild(p);

p.animate([
      { transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
      { transform: `translate(${x}px, ${y}px) scale(0.2)`, opacity: 0 }
    ], {
      duration: 1200,
      easing: 'ease-out'
    });

setTimeout(() => p.remove(), 1200);
  }
}

/* ⚡ Ultra smooth animation */
function updateClock() {
  const now = new Date();

const h = now.getHours();
  const m = now.getMinutes();
  const s = now.getSeconds();
  const ms = now.getMilliseconds();

const smoothSec = s + ms / 1000;

// Smooth rotations
  hour.style.transform =
    `translate(-50%,0) rotate(${(h%12)*30 + m*0.5}deg)`;

minute.style.transform =
    `translate(-50%,0) rotate(${m*6 + smoothSec*0.1}deg)`;

second.style.transform =
    `translate(-50%,0) rotate(${smoothSec*6}deg)`;

// Ring
  const offset = circumference - (smoothSec / 60) * circumference;
  ring.style.strokeDashoffset = offset;

// Digital
  digital.innerText =
    `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;

date.innerText = now.toDateString();

// 💥 Explosion
  if (s === 0 && m !== lastMinute) {
    createParticles();
    lastMinute = m;
  }

requestAnimationFrame(updateClock);
}

updateClock();

- Modern Digital and Analog Combo Clock

Live Preview