ES
Home › Time & Date › Countdown Widget Generator

Countdown Widget Generator

Design a countdown for a launch, sale, wedding or event, watch the live preview, then copy a self-contained HTML snippet for your website or an iframe and link for Notion and Google Sites. Every visitor sees the same remaining time, wherever they are.

Last updated:

1. Event
Quick targets

2. Layout Style
Show units
3. Colors & font Color themes

Live preview

Advertisement
Advertisement

How to use the Countdown Widget Generator

  1. Set the event: type a title, pick the date, time and the time zone the event happens in, or use a quick target such as New Year or In 7 days.
  2. Choose a layout: boxes, flip tiles, minimal or one line, which units to show, the size, labels and what happens at zero.
  3. Style it: click a color theme or pick your own colors, font and corner radius. The live preview updates instantly.
  4. Pick an embed type: HTML + JS code for your website, an iframe for builders that block scripts, or the Link tab for Notion.
  5. Copy and paste: press Copy code and paste it into a Custom HTML or Embed block, or download a ready-made .html page.

Which embed type should I use?

Where you want the countdownUseHow to paste it
WordPress (block editor)HTML + JS codeAdd a Custom HTML block and paste. On WordPress.com, scripts need a plan that allows them; otherwise use the iframe.
SquarespaceHTML + JS codeAdd a Code block, keep the mode on HTML and paste.
WixHTML + JS codeAdd Embed Code > Embed HTML, choose Code and paste, then resize the box.
WebflowHTML + JS codeDrag an Embed element onto the page and paste.
ShopifyHTML + JS codeAdd a Custom Liquid section or block in the theme editor and paste.
Google SitesiframeInsert > Embed > Embed code, paste the iframe, then adjust the frame height.
NotionLinkType /embed, paste the link and choose Embed link.
Email newslettersNot supportedEmail apps block scripts and iframes; link to a page that shows the countdown instead.

How the countdown is calculated

When you press a button or change a setting, the generator converts your date and time from the chosen time zone into a single moment in UTC (a Unix timestamp in milliseconds), using your browser's built-in time zone database. That number is written into the code. Every second, the widget subtracts the visitor's current time from it and splits the result:

days = ⌊s ÷ 86,400⌋, hours = ⌊(s mod 86,400) ÷ 3,600⌋, minutes = ⌊(s mod 3,600) ÷ 60⌋, seconds = s mod 60, where s is the number of seconds left, rounded up so the display reaches 00 exactly at the target moment.

Because the target is stored as a universal moment, there is no "local time" confusion: an event at 8:00 PM in New York ends at 5:00 PM for a visitor in Los Angeles and at 1:00 AM the next day in London (outside the weeks when US and UK daylight saving dates differ).

Tips for a countdown that converts

  • Say what happens at zero. A title such as "Early-bird price ends in" tells visitors why the timer matters.
  • Drop the seconds for long countdowns of weeks or months; the ticking draws less attention away from your content.
  • Use the transparent background to blend the widget into a colored section, and check it with the Dark and Grid preview backgrounds.
  • Keep it honest. Don't reset a sale timer for each visitor; this widget counts to one real moment, which builds trust.
  • Several timers on one page? Generate each one separately: every snippet gets its own ID, so they never interfere.

Frequently asked questions

How do I add a countdown timer to Notion?

Open the Link (Notion) tab and press Copy link. In Notion, type /embed, paste the link and choose Embed link, then drag the bottom edge of the block to fit the widget. All your settings, including the date and colors, are stored inside the link, so nothing needs to be saved on a server.

Will visitors in other time zones see the right time?

Yes. The countdown is fixed to one exact moment: the date and time you enter in the event's time zone are converted to a universal timestamp when the code is generated. A visitor in Tokyo and one in New York both see the same remaining time, and daylight saving changes are already taken into account.

Does the HTML snippet need any external files or libraries?

No. The snippet is a small block of HTML, CSS and plain JavaScript (usually around 3 KB) with no external scripts, fonts, cookies or tracking. Its CSS is scoped to a unique ID, so it won't change the rest of your page, and you can place several different countdowns on one page.

Where can I paste the code?

Anywhere that accepts custom HTML with scripts: a WordPress Custom HTML block, a Squarespace Code block, Wix Embed HTML, a Webflow Embed element, Shopify Custom Liquid or a hand-written web page. If a platform strips scripts, use the iframe code instead; if it only accepts a URL, use the link.

What happens when the countdown reaches zero?

You choose: replace the numbers with your end message, keep showing 00 with the message below, or switch to counting up so the widget shows how long ago the event started, which is handy for an anniversary or a 'time since launch' counter.

Can I show only days, or only hours and minutes?

Yes. Untick the units you don't want. Hidden units are rolled into the next visible one, so with days turned off a countdown of 2 days and 3 hours shows 51 hours. You can also rename the labels, for example to another language, or clear a label to hide it.

Does the countdown depend on the visitor's clock?

The snippet compares the target moment with the visitor's device clock, which phones and computers keep in sync automatically. If a device clock is set wrong by hand, its countdown will be off by the same amount; it corrects itself as soon as the clock is right.

Are all the tools on FreeToolCabin tested for quality and accuracy?

Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.

Related tools

Countdown TimerOnline timer with alarm sound.Days Until CalculatorCount down the days to any event.New Year CountdownLive countdown to New Year in your time zone, with year progress and fireworks.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.Stream Countdown OverlayMake a "starting soon" countdown screen for OBS: pick time, colors, fonts and animation, copy the URL.Online Alarm ClockSet multiple alarms with sounds, snooze and keep-screen-awake.10 Minute TimerA ready-to-go 10 minute countdown with alarm and fullscreen.30 Minute TimerA ready-to-start 30 minute countdown with alarm, fullscreen and presets.5 Minute TimerA 5-minute countdown with alarm sound and fullscreen mode.1 Minute TimerA ready-to-go 60 second countdown with alarm and fullscreen.15 Minute TimerA ready-to-go 15 minute countdown with alarm, presets and fullscreen view.20 Minute TimerA ready-to-go 20 minute countdown with alarm, presets and fullscreen view.Pomodoro Timer25/5 focus and break timer with alerts and a task list.Interval TimerHIIT and Tabata interval timer with rounds, sets, beeps and voice cues.Chess ClockTwo-player chess timer with blitz presets, increment and delay modes.StopwatchOnline stopwatch with laps, fullscreen mode and CSV export.Classroom TimerBig visual countdown ring timer for classrooms with presets and end sounds.Christmas CountdownLive countdown of days, hours, minutes and sleeps until Christmas Day.Meditation TimerCalm meditation timer with singing bowl bells, interval chimes, ambient sounds and breathing guide.30 Second TimerA ready-to-go 30 second countdown with alarm, presets and fullscreen view.2 Minute TimerA ready-to-go 2 minute countdown with alarm, presets and fullscreen view.3 Minute TimerA ready-to-go 3 minute countdown with alarm, presets and fullscreen view.45 Minute TimerA ready-to-go 45 minute countdown with alarm, presets and fullscreen view.1 Hour TimerA ready-to-go 1 hour countdown with alarm, presets and fullscreen view.2 Hour TimerA ready-to-go 2 hour countdown with alarm, presets and fullscreen view.Halloween CountdownLive countdown to Halloween in days, hours, minutes and seconds.Thanksgiving CountdownLive countdown to Thanksgiving in days, hours, minutes and seconds.Valentine's Day CountdownLive countdown to Valentine's Day in days, hours, minutes and seconds.Easter CountdownLive countdown to Easter in days, hours, minutes and seconds.10 Second TimerA ready-to-go 10 second countdown with alarm, presets and fullscreen view.20 Second TimerA ready-to-go 20 second countdown with alarm, presets and fullscreen view.4 Minute TimerA ready-to-go 4 minute countdown with alarm, presets and fullscreen view.7 Minute TimerA ready-to-go 7 minute countdown with alarm, presets and fullscreen view.8 Minute TimerA ready-to-go 8 minute countdown with alarm, presets and fullscreen view.12 Minute TimerA ready-to-go 12 minute countdown with alarm, presets and fullscreen view.25 Minute TimerA ready-to-go 25 minute countdown with alarm, presets and fullscreen view.40 Minute TimerA ready-to-go 40 minute countdown with alarm, presets and fullscreen view.50 Minute TimerA ready-to-go 50 minute countdown with alarm, presets and fullscreen view.Eid al-Fitr CountdownLive countdown to the expected date of Eid al-Fitr, with estimates for coming years.Ramadan CountdownLive countdown to the expected start of Ramadan, with estimated dates for coming years.Wedding CountdownCount down to your wedding day; enter your date and share the link.Contraction TimerTime labor contractions with one tap: duration, frequency, hourly averages and a 5-1-1 check.Visual TimerShrinking red-disk visual countdown for kids and classrooms: drag to set 1–60 minutes.Breastfeeding TimerTime left and right side nursing, see which side to start next, feed intervals and night totals.Fasting TimerLive intermittent fasting timer with 16:8, 18:6, 20:4 and OMAD goals, stages and a fast log.Multiple Kitchen TimersRun several named cooking timers at once, each with its own alarm sound, presets and big display.AMRAP TimerAs-many-rounds-as-possible countdown with a 10 s lead-in, tap-to-count rounds, splits and a final score.Boxing Round TimerRound and rest timer with boxing bell, 10-second clapper and presets for boxing, MMA and kickboxing.Countdown Video MakerMake a 10, 30 or 60 second countdown video in film leader, digital or neon style. Export MP4 or WebM.Email Countdown Timer GIFMake an animated countdown timer GIF for email campaigns with your own fonts and colors, then download it.EMOM TimerEvery minute on the minute workout timer with rounds, rotating movements, beeps and rest tracking.Holiday CountdownsLive countdowns to every upcoming US and world holiday, sorted by date, plus your own events.Hourglass TimerAnimated sand hourglass countdown with custom time, flip to restart, sand colors and a chime.Japanese Walking TimerInterval walking timer: 3 minutes fast, 3 minutes slow for 30 minutes, with voice cues and step beeps.Multiple CountdownsTrack several event countdowns on one dashboard with emojis, progress bars and a share link.Presentation TimerSplit your talk time across slides and see time per slide, remaining time and if you're ahead or behind.Run Walk Interval TimerBeginner 5K run/walk interval timer with 9-week plan, voice cues, warm-up, cool-down and progress.Speech TimerGreen, yellow and red timing lights for speeches and Table Topics, with presets, fullscreen and a log.20-20-20 Eye Break TimerEvery 20 minutes, look 20 feet away for 20 seconds: reminders, notifications and a break overlay.Kegel Exercise TimerGuided squeeze and relax timer for pelvic floor exercises with levels, sets, sound, vibration and streaks.Coffee Brew TimerStep-by-step brew timer for pour-over, Chemex, French press and AeroPress with water targets.Succession Planting CalculatorSowing interval and dated plantings for a continuous harvest, up to your first fall frost.Tea Steeping TimerTea timer with green, black, oolong, white and herbal presets, water temperature and re-steeps.90 Minute TimerA ready-to-go 90 minute countdown with alarm, presets and fullscreen view.3 Hour TimerA ready-to-go 3 hour countdown with alarm, presets and fullscreen view.24 Hour TimerA ready-to-go 24 hour countdown with alarm, presets and fullscreen view.Mother's Day CountdownLive countdown to Mother's Day in days, hours, minutes and seconds.Father's Day CountdownLive countdown to Father's Day in days, hours, minutes and seconds.
See all 76 Timers & Countdowns →