Countdown Timer Generator

Build a countdown you can embed without a plugin. The generator uses the visitor’s browser clock, updates once per second, and can show days, hours, minutes, and seconds with configurable labels and an expiration message.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><section class="stg-box"><p>Your headline</p><p>Timezone: UTC</p><div class="stg-countdown stg-grid" role="timer" aria-live="off"><div><strong data-unit="days">00</strong> <span>days</span></div><div><strong data-unit="hours">00</strong> <span>hours</span></div><div><strong data-unit="minutes">00</strong> <span>minutes</span></div><div><strong data-unit="seconds">00</strong> <span>seconds</span></div></div><p class="stg-done" role="status"></p></section><script>const duration=60*1000;let end=1796126400000;const root=document.querySelector('.stg-countdown');function tick(){let left=Math.max(0,Math.floor((end-Date.now())/1000));const values={days:Math.floor(left/86400),hours:Math.floor(left/3600)%24,minutes:Math.floor(left/60)%60,seconds:left%60};root.querySelectorAll('[data-unit]').forEach(el=>el.textContent=String(values[el.dataset.unit]).padStart(2,'0'));if(left<=0){clearInterval(timer);document.querySelector('.stg-done').textContent="The event has started.";}}const timer=setInterval(tick,1000);tick();</script></body></html>

What this generator does

Target-date and duration modes.
Timezone-aware target configuration.
Days/hours/minutes/seconds display toggles.
Completion message, hide-on-finish, or replace-with-link behavior.
Accessible live region with non-spammy update frequency.

How to use

Choose a target date/time or a fixed duration.
Choose the units to display.
Customize labels, typography, colors, spacing, and card style.
Set the message or action after zero.
Preview and copy HTML/CSS/JS.

Best practices

Use an explicit timezone for scheduled events.
Do not claim scarcity with fake restarting timers.
Keep the completion state useful after the timer reaches zero.

Frequently asked questions

Does the timer keep working after refresh?

Target-date mode does because it compares the current time to a fixed deadline. Duration mode can optionally store the start timestamp in localStorage.

Can I remove seconds?

Yes. Toggle off any unit you do not want to show.

Related tools & guides

Hero Section Generator

Design a responsive landing-page hero with headline, supporting text, CTA buttons, image or gradient background and copyable HTML/CSS.

Notification / Toast Generator

Create an accessible notification toast for success, error, warning or information messages. Configure placement, duration and actions, then copy the code.

Pricing Table Generator

Create a responsive pricing table with plan names, prices, feature lists, CTA buttons and an optional highlighted plan. Copy semantic HTML and CSS.