Scrolling Text Generator

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>

Target Date & Time

Show Units

Styling