Countdown Timer Generator
Create customizable countdown timers for events, product launches, and sales. Set a target date, customize the look, and copy the code.
Live Preview
00Days
17Hours
22Min
41Sec
Generated Code
<style>
.ct-container {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
background: #1a1a2e;
padding: 20px;
font-family: system-ui, sans-serif;
border-radius: 12px;
}
.ct-box {
display: flex;
flex-direction: column;
align-items: center;
background: #16213e;
padding: 16px 20px;
border-radius: 8px;
min-width: 70px;
}
.ct-value {
font-size: 36px;
font-weight: 700;
color: #ffffff;
line-height: 1;
}
.ct-label {
font-size: 11px;
color: #ffffff;
opacity: 0.7;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 1px;
}
.ct-expired {
font-size: 15px;
color: #ffffff;
text-align: center;
padding: 20px;
}
</style>
<div id="ct-widget" class="ct-container">
<div class="ct-box">
<span class="ct-value" id="ct-days">00</span>
<span class="ct-label">Days</span>
</div>
<div class="ct-box">
<span class="ct-value" id="ct-hours">00</span>
<span class="ct-label">Hours</span>
</div>
<div class="ct-box">
<span class="ct-value" id="ct-minutes">00</span>
<span class="ct-label">Min</span>
</div>
<div class="ct-box">
<span class="ct-value" id="ct-seconds">00</span>
<span class="ct-label">Sec</span>
</div>
</div>
<script>
(function() {
const target = new Date("2026-02-16T00:00:00").getTime();
const container = document.getElementById("ct-widget");
function update() {
const now = Date.now();
const diff = target - now;
if (diff <= 0) {
container.innerHTML = '<div class="ct-expired">Time's up!</div>';
return;
}
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
const de = document.getElementById("ct-days"); if(de) de.textContent = String(d).padStart(2,"0");
const he = document.getElementById("ct-hours"); if(he) he.textContent = String(h).padStart(2,"0");
const me = document.getElementById("ct-minutes"); if(me) me.textContent = String(m).padStart(2,"0");
const se = document.getElementById("ct-seconds"); if(se) se.textContent = String(s).padStart(2,"0");
requestAnimationFrame(update);
}
update();
})();
</script>