Free tool
Countdown Timer Generator (HTML + CSS, no dependencies)
Generate a copy-paste countdown timer for any website — Shopify, WooCommerce, Webflow, plain HTML. Three styles, CLS-zero by design, no external dependencies, ~0.6 KB inline JS.
Sale ends in
Copy-paste HTML + JS
<!-- Countdown timer (Yokaify generator, no external deps, CLS = 0) -->
<span id="yk-cd-1v74h1" class="yk-cd-1v74h1" style="display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9999px;background:#111827;color:#fff;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1;" data-deadline="2026-06-26T23:59:00.000Z" aria-live="polite">
<span style="opacity:.7;font-size:11px;letter-spacing:.06em;text-transform:uppercase;">Sale ends in</span>
<span data-d="d" style="display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;min-width:1.6em;text-align:right;">00</span><span style="opacity:.7;font-size:11px;letter-spacing:.06em;text-transform:uppercase;">d</span>
<span style="opacity:.4;">:</span>
<span data-d="h" style="display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;min-width:1.6em;text-align:right;">00</span><span style="opacity:.7;font-size:11px;letter-spacing:.06em;text-transform:uppercase;">h</span>
<span style="opacity:.4;">:</span>
<span data-d="m" style="display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;min-width:1.6em;text-align:right;">00</span><span style="opacity:.7;font-size:11px;letter-spacing:.06em;text-transform:uppercase;">m</span>
<span style="opacity:.4;">:</span>
<span data-d="s" style="display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;min-width:1.6em;text-align:right;">00</span><span style="opacity:.7;font-size:11px;letter-spacing:.06em;text-transform:uppercase;">s</span>
</span>
<script>
(function(){var el=document.getElementById("yk-cd-1v74h1");if(!el)return;var deadline=new Date(el.dataset.deadline).getTime();function tick(){var now=Date.now(),diff=Math.max(0,deadline-now);var d=Math.floor(diff/86400000),h=Math.floor(diff%86400000/3600000),m=Math.floor(diff%3600000/60000),s=Math.floor(diff%60000/1000);el.querySelector('[data-d=d]').textContent=String(d).padStart(2,'0');el.querySelector('[data-d=h]').textContent=String(h).padStart(2,'0');el.querySelector('[data-d=m]').textContent=String(m).padStart(2,'0');el.querySelector('[data-d=s]').textContent=String(s).padStart(2,'0');if(diff>0)setTimeout(tick,1000);}tick();})();
</script>No external dependencies. Renders synchronously, then upgrades with ~0.6 KB of inline JS. CLS = 0 because each digit slot has a fixed minimum width.
How to add it to your site
- Pick a style (pill, card, or minimal) and a deadline.
- Copy the generated HTML.
- Paste it where you want the timer to appear.
It has no external dependencies, so it works anywhere you can embed HTML:
- Shopify: paste it into a custom section or announcement bar.
- WooCommerce / WordPress: drop it into a Custom HTML block or widget.
- Webflow / Framer: use an HTML embed component.
- Plain HTML, Astro, or Next.js: paste the snippet directly.
When a countdown timer works
Use one when the deadline is real and the offer matters:
- A free-shipping cutoff for next-day delivery.
- A webinar or registration deadline.
- Low stock, but only if it is actually true.
Skip it when:
- The timer resets on every visit. People stop believing it.
- The discount is so big it makes your normal price look fake.
Fake scarcity also draws regulator attention. The FTC and EU both target deceptive countdowns.
Accessibility
The output uses aria-live="polite" so screen readers announce updates without interrupting. The labels (days, hours, minutes, seconds) are real text, not icons. If you add any pulsing or flashing decoration, hide it for visitors who prefer reduced motion.
Further reading
Frequently asked questions
Pick a style and a deadline, copy the generated HTML, and paste it where you want it — Shopify section, WooCommerce widget, Webflow embed, plain HTML. The snippet has no external dependencies.
Last verified May 23, 2026.