Create New Year 2026 Countdown Code | HTML, CSS, and Javascript

In This Post, I’ll give you New Year 2026 Countdown Javascript code so that you can create a Countdown For Happy New Year 2026.

Also, You Can Use This Countdown for your Personal Projects If you need any countdown then you can use this script.

New Year Countdown Code Details

Written By	Unknown
Languages	HTML, CSS, and JavaScript
Responsive	Yes
Downloading Link	Below

HTML Code For New Year Countdown

<div class="timer">
  <div class="box">
    <h2 id="days"></h2>
    <h4>Days</h4>
  </div>
  <div class="box">
    <h2 id="hrs"></h2>
    <h4>Hours</h4>
  </div>
  <div class="box">
    <h2 id="mins"></h2>
    <h4>Minutes</h4>
  </div>
  <div class="box">
    <h2 id="secs"></h2>
    <h4>Seconds</h4>
  </div>
</div>

CSS Code For New Year Countdown

* {
    margin: 0;
    padding: 0;
    font-family: 'Lato Black', sans-serif;
}

body {
    background-color: #0F4C75;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
}

.timer {
    display: flex;
}

.box {
    position: relative;
    background-color: #FFF;
    color: #1B262C;
    height: 140px;
    width: 140px;
    margin: 4px;
    font-size: 3.2rem;
    text-align: center;
    box-shadow: 2px 12px 18px 4px #333;
}

.box h4 {
    position: absolute;
    bottom: 0;
    background-color: #3282B8;
    width: 100%;
    color: #FFF;
    text-transform: uppercase;
    font-size: 1.4rem;
    padding: 8px 0;
}

Javascript Code For New Year Countdown 2026

var countDownDate = new Date("Jan 1, 2026 00:00:00").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
    document.getElementById("days").innerHTML = days;
                
          document.getElementById("hrs").innerHTML = hours;
                
                document.getElementById("mins").innerHTML = minutes;
                
                document.getElementById("secs").innerHTML = seconds;
}, 1000);

Result New Year Countdown 2026

See the Pen Countdown Timer (New Year 2026) by Aqueel Md (@aqueel) on CodePen.

I hope guys you find a working Countdown code for New Year 2026. If You have any suggestions then you can share them with us via the comment section.