chevron_right

Gerador de Cronômetro Regressivo

Gere um cronômetro regressivo HTML incorporável ao vivo para qualquer data. Copie e cole o trecho em qualquer site sem scripts externos.

Data e hora alvo

Rótulo acima do temporizador

Mensagem ao expirar

Tema

Pré-visualização ao vivo

Launching In

Days

Hours

Minutes

Seconds

HTML incorporável

<div id="cd_2z8a0n" style="font-family:system-ui,sans-serif;background:#0f172a;color:#f8fafc;padding:1.5rem;border-radius:0.75rem;text-align:center;display:inline-block;">
  <div style="font-size:1rem;margin-bottom:0.75rem;opacity:0.8">Launching In</div>
  <div class="cd-grid" style="display:flex;gap:0.75rem;justify-content:center;">
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-d" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Days</div></div>
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-h" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Hours</div></div>
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-m" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Minutes</div></div>
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-s" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Seconds</div></div>
  </div>
</div>
<script>(function(){var el=document.getElementById("cd_2z8a0n"),t=1780885440000;function p(n){return String(n).padStart(2,"0")}function u(){var d=t-Date.now();if(d<=0){el.innerHTML='<div style="font-size:1.5rem;font-weight:700;color:#38bdf8">We're live!</div>';return}var s=Math.floor(d/1000),D=Math.floor(s/86400),H=Math.floor(s%86400/3600),M=Math.floor(s%3600/60),S=s%60;el.querySelector('.cd-d').textContent=D;el.querySelector('.cd-h').textContent=p(H);el.querySelector('.cd-m').textContent=p(M);el.querySelector('.cd-s').textContent=p(S);requestAnimationFrame(function(){setTimeout(u,1000)})}u()})();</script>

Ferramentas semelhantes

Gerador de Horários Aleatórios

Gere horários aleatórios (HH:MM ou HH:MM:SS) dentro de um intervalo, em formato 12 ou 24 horas.

Gerador de Timestamps Unix

Gere o timestamp Unix atual, converta qualquer data, ou crie lotes de timestamps aleatórios.

Gerador de Datas Aleatórias

Gere datas aleatórias dentro de um intervalo especificado com opções de quantidade, formato e hora.

Gerador de QR Code em Lote

Gere múltiplos QR codes de uma vez a partir de uma lista de URLs ou textos.

QR código gerador

Gere códigos QR a partir de texto ou URLs.

Editor de caminho SVG

Edite e visualize interativamente dados de caminho SVG (atributo d).

Gerador de números de telefone falsos

Gere números de telefone falsos em formatos específicos por país usando prefixos reservados ou fictícios seguros para testes.

apps

Mais ferramentas

Explore nossa colecao completa de ferramentas online gratuitas.

Gere um Cronômetro Regressivo em Segundos

Contagens regressivas criam urgência. Seja para lançar um produto, rodar uma promoção, marcar a chegada de um evento ou construir uma página coming soon, um temporizador ao vivo mantém os visitantes engajados e focados no que está por vir. O Gerador de Cronômetro Regressivo produz um snippet HTML completo e autocontido que você pode colar em qualquer site — WordPress, Shopify, Webflow, Notion, HTML puro — sem adicionar bibliotecas ou dependências externas.

O Que Você Obtém

Um <div> mais um <script> inline. Sem CDN, sem npm, sem etapa de build. O script se atualiza a cada segundo e gerencia o estado de expiração automaticamente.

Personalize

Data e hora alvo — escolha exatamente quando a contagem termina.
Rótulo — uma linha de texto acima das caixas (ex.: "Lançando em", "Oferta encerra em").
Mensagem de expiração — o que mostrar quando o cronômetro chegar a zero ("Estamos ao vivo!", "Esgotado" etc.).
Tema — Escuro, Claro ou Mínimo (herda a fonte e as cores do site pai).

Ideal Para

Lançamentos de produtos e campanhas no Kickstarter
Relâmpagos, Black Friday, ofertas por tempo limitado
Contagens para webinars ou transmissões ao vivo
Contagens para casamentos e eventos
Landing pages coming soon

Notas Técnicas

O snippet usa apenas JavaScript puro e CSS inline. Utiliza um ID aleatório único para que você possa colocar vários cronômetros na mesma página sem conflitos. A contagem usa o relógio do dispositivo do visitante — para timers de marketing estritamente sincronizados, considere um fallback no servidor.

Privacidade

O gerador funciona inteiramente no seu navegador. Nunca vemos sua data-alvo, seu rótulo nem as páginas em que você usa o snippet.