Generate a free countdown timer for your website

Future time / date

This is the end of the countdown in Date / Time format. 2023-04-02T05:38:54

Font

Customize the font (using Google Fonts).

Background

Text

Height (px)

Height of the image in pixels. The image will be resized to fit

Width (px)

Width of the image in pixels. The image will be resized to fit

Numbers Y (%)

This is the Y axis position of the numbers in the countdown.

Labels Y (%)

This is the Y axis position of the labels in the countdown.

Redirect to (URL)

This is the URL you want to redirect to when the countdown expires.

Download and host the SVG file yourself. This is the best option.

View SVG source

<svg
  id="_kklthq"
  viewBox="0 0 650 250"
  fill="#000000"
  xmlns="http://www.w3.org/2000/svg"
  aria-labelledby="_kklthq_title _kklthq_desc"
>
  <title>
    Countdown timer to: 2023-04-02T05:38:54.450-04:00
  </title>
  <desc>
    A countdown timer to 2023-04-02T05:38:54.450-04:00 with days, hours, minutes, and seconds displayed.
  </desc>
  
  <rect 
    x="0" 
    y="0" 
    width="650" 
    height="250" 
    style="fill: #ffffff;" 
  />

  <text 
    x="12.5%" 
    y="55%" 
    text-anchor="middle" 
    name="days">
    -
  </text>
  <text 
    x="12.5%" 
    y="75%" 
    class="label" 
    text-anchor="middle">
    Days
  </text>

  <text 
    x="37.5%" 
    y="55%" 
    text-anchor="middle" 
    name="hours">
    -
  </text>
  <text 
    x="37.5%" 
    y="75%" 
    class="label" 
    text-anchor="middle">
    Hours
  </text>

  <text 
    x="62.5%" 
    y="55%" 
    text-anchor="middle" 
    name="minutes">
    -
  </text>
  <text 
    x="62.5%" 
    y="75%" 
    class="label" 
    text-anchor="middle">
    Minutes
  </text>

  <text 
    x="87.5%" 
    y="55%" 
    text-anchor="middle" 
    name="seconds">
    -
  </text>
  <text 
    x="87.5%" 
    y="75%" 
    class="label" 
    text-anchor="middle">
    Seconds
  </text>

  <text
    x="50%"
    y="50%"
    text-anchor="middle"
    name="end"
    class="label"
    visibility="hidden">
    Expired
  </text>

  <script type="text/javascript">
    // <![CDATA[
      (() => {
        const loadTime = new Date("2023-04-02T05:38:54.450-04:00");
        const [days, hours, minutes, seconds, end] = document.querySelectorAll('svg > [name]');
        const run= () => {
          const timeDiff = loadTime - Date.now();
          const totalSeconds = Math.max(0, Math.floor(timeDiff / 1000));
          const expired = totalSeconds <= 0;
          const [daysDiff, hoursDiff, minutesDiff, secondsDiff] = [
            Math.max(Math.floor(totalSeconds / 86400), 0),
            Math.max(Math.floor((totalSeconds % 86400) / 3600), 0),
            Math.max(Math.floor((totalSeconds % 3600) / 60), 0),
            Math.max(totalSeconds % 60, 0)
          ];
          days.textContent = daysDiff.toLocaleString();
          hours.textContent = hoursDiff;
          minutes.textContent = minutesDiff;
          seconds.textContent = secondsDiff;
          if( expired ) {
            clearInterval(window.countdown_timer);
            document.querySelectorAll('text').forEach((el) => el.setAttribute(
              'visibility', 
              el.getAttribute("visibility") === "hidden" ? "visible" : "hidden"
            ));
            
          };
        };
        window.countdown_timer = setInterval(run, 1000);
        run();
      })();
    // ]]>
  </script>

  <style type="text/css">
    // <![CDATA[
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
    #_kklthq {
      font-family: Montserrat;
      height: 100%;
      width: 100%;
      max-width: 650px;
      max-height: 250px;
      preserveAspectRatio: xMidYMid meet;
    }
    #_kklthq text {
      font-size: 6rem;
      font-weight: 600;
    }
    #_kklthq text.label {
      font-size: 2rem;
      font-weight: 400;
    }
    // ]]>
  </style>
</svg>

This will allow you to embed the countdown in your website.

View embed code

<iframe sandbox="allow-top-navigation allow-scripts" style="border: none; min-height: 250px; width: 100%; max-height: 100%; max-width: 100%; display: block;" src="https://timer.plus/timer.html?backgroundColor=%23ffffff&textColor=%23000000&width=650&height=250&numberY=55&labelY=75&timezone=America%2FNew_York&font=Montserrat&endMessage=Expired&end=1680428334450"></iframe>

Send this hosted URL to your friends and family. This is the easiest option.

View url

https://timer.plus/timer?backgroundColor=%23ffffff&textColor=%23000000&width=650&height=250&numberY=55&labelY=75&timezone=America%2FNew_York&font=Montserrat&endMessage=Expired&end=1680428334450