Logotipo de Bitdoze

Temporizador de Cuenta Regresiva en Carrd: 5 Diseños Personalizados (Código para Copiar)

Añade un temporizador de cuenta regresiva personalizado en Carrd con 5 diseños HTML/CSS para copiar y pegar: tarjeta, oscuro, reloj flip y circular. Incluye embed de Pro Standard y fechas seguras en UTC.

Dragos

49 min de lectura

Temporizador de Cuenta Regresiva en Carrd: 5 Diseños Personalizados (Código para Copiar)

Carrd incluye un elemento «Timer» integrado que cuenta hacia atrás (o hacia adelante), pero sus opciones de estilo son limitadas. Si quieres un temporizador de cuenta regresiva en Carrd para un lanzamiento, una oferta o un evento que parezca parte de tu diseño, un elemento Embed con código personalizado es el camino.

Un elemento Embed más el código de abajo basta para tener un temporizador que combine con tu marca y no cargue ningún script externo. Aquí tienes cinco diseños autocontenidos: una tarjeta con degradado, una barra oscura minimalista, anillos de progreso circulares, un reloj flip y una versión de texto en línea. Todo HTML/CSS/JS puro y todo apto para móvil.

Aviso antes de seguir: los Embeds requieren Carrd Pro Standard (19 $/año). Detalles en la sección Qué Necesitas, más abajo.

Carrd.co

Algunos tutoriales de Carrd:

La lista completa de plugins, temas y tutoriales de Carrd está en mi sitio carrdme.com. Si prefieres instalar en lugar de pegar código, consigue ahí mi plugin de pestañas para Carrd o mi plugin de acordeón para Carrd.

Cuándo Usar un Temporizador de Cuenta Regresiva en tu Sitio de Carrd

Los temporizadores de cuenta regresiva se ganan su lugar cuando existe una fecha límite real:

  1. Lanzamientos de producto - para crear expectación antes del estreno
  2. Ventas y promociones - una oferta por tiempo limitado con un final concreto (una fecha de fin real supera al texto de «solo por tiempo limitado»); combínala con una tabla de precios en Carrd para que el descuento sea visible mientras el reloj corre
  3. Registro a eventos - plazos de inscripción
  4. Páginas de «próximamente» - avisar a los visitantes cuándo volver
  5. Webinars y eventos en vivo - la cuenta atrás hasta la hora de inicio

Un reloj en marcha crea una urgencia que el texto estático no puede igualar. También impone un requisito estricto: para un lanzamiento o una oferta, el temporizador tiene que llegar a cero en el mismo instante para cada visitante. Ese detalle suele fallar, así que no te saltes la sección de zonas horarias de abajo.

Qué Necesitas

Un único requisito decide si algo de este artículo funciona: el elemento Embed es de pago. Así quedan los planes (según carrd.com/pro, a octubre de 2026):

Plan Precio Sitios ¿Embeds?
Free 0 $ 3 No
Pro Lite 9 $/año 3 No
Pro Standard 19 $/año 10 Sí - además de Forms, Widgets, Analytics (la analítica nativa y sin cookies de Carrd desde octubre de 2026, o de terceros como Plausible / Umami) y dominios personalizados
Pro Plus 49 $/año 25 Sí - añade Variables, Redirects y Framing (no necesarios para cuentas regresivas)

¿Necesitas más sitios? Cada nivel tiene variantes con más sitios (Pro Standard 25 a 39 $/año, hasta 1000 sitios a 599 $/año): desglose completo en la reseña de Carrd.

Se requiere Pro Standard

Las cuentas Free y Pro Lite no pueden añadir código personalizado en absoluto, así que nada de cuentas regresivas. Si estás en el plan gratuito, la actualización a Carrd Pro Standard (19 $/año) desbloquea todo lo de este artículo, además de formularios, widgets y dominios personalizados. Mi reseña de Carrd (precios y planes comparados) explica qué obtienes en cada nivel.

Hay una prueba gratuita de Pro de 7 días (sin pago ni tarjeta), y cubre formularios, widgets y la conexión de un dominio personalizado a Carrd. Pero la lista de funciones de la prueba no incluye el elemento Embed, así que no puedes probar estos snippets con ella: consulta la FAQ de la prueba más abajo.

Nada más que instalar. Cada snippet de abajo es un bloque HTML/CSS/JS autocontenido.

  • Cuenta de Carrd en Pro Standard o superior
  • Un sitio de Carrd publicado (o publicable): un subdominio gratuito tusitio.carrd.co sirve para probar
  • Tu fecha y hora objetivo decididas, con una decisión sobre la zona horaria (se explica abajo)
  • Cinco minutos

Cómo Añadir un Temporizador de Cuenta Regresiva Personalizado a Carrd

Todos los diseños de este artículo pasan por el mismo elemento: el Embed. El flujo nunca cambia: añade el elemento, pon «Type» en «Code», pega un snippet y publica.

Paso 1: Añade un Elemento Embed («Type»: «Code», «Style»: «Inline»)

Haz clic en el botón + del editor y añade un elemento Embed; luego pon «Type» en «Code» y «Style» en «Inline».

Pega tu HTML/CSS/JS en el campo de código. Inline renderiza la cuenta regresiva justo donde colocaste el elemento en el layout. La otra opción, Hidden, inyecta el código en el Head, Body Top o Body End de la página: correcta para scripts globales como la analítica, incorrecta para una cuenta regresiva visible. (Tutoriales antiguos mencionan un estilo «Above»; esa opción ya no existe.)

Para encontrar o reeditar el embed más tarde, usa el panel de elementos: More Actions → Elements… lista todos los elementos de la página y, desde octubre de 2026, también muestra el estado de visibilidad de cada uno, incluidos los excluidos de la publicación u ocultos con CSS. Útil cuando un embed «desaparece»: revisa el panel antes de sospechar del código.

Los embeds son invisibles en el editor

La documentación de Carrd lo dice claramente: el elemento Embed no muestra nada en el editor. Un hueco en blanco donde debería estar tu cuenta regresiva es normal. Publica el sitio y aparecerá. Es la falsa alarma número uno con el código personalizado en Carrd.

Pega el códigoel editor queda en blancoPublica el sitioy fuerza la recargaCuenta activasegundos corriendo
Los embeds no renderizan nada en el editor. Publica para verificar cada cambio.

Después, ejecuta la misma comprobación de cuatro pasos cada vez:

  • Publica el sitio
  • Fuerza la recarga de la página publicada (Ctrl+Shift+R / Cmd+Shift+R)
  • Abre la consola de DevTools: debería estar limpia, sin errores en rojo
  • Observa los segundos correr unos instantes

Para revertir un cambio, borra el elemento Embed y vuelve a publicar. Nada más en la página se ve afectado.

Paso 2: Elige tu Estilo de Cuenta Regresiva

Elige uno de los cinco diseños de abajo y pégalo en el campo de código del embed. La única edición obligatoria es la fecha objetivo al inicio del script, explicada en Configura tu Fecha Objetivo.

¿Dos temporizadores en una misma página?

Cada snippet usa sus propios IDs (countdown1…countdown5), así que estilos distintos pueden coexistir. Dos copias del mismo estilo no: los IDs duplicados hacen que solo el primer temporizador funcione. Renombra cada id de la segunda copia (days1 → days6, countdown1 → countdown6, dayCircle → dayCircle2, day1Card → day1Card2) y las cadenas getElementById correspondientes en su script, y funcionará.

Opción 1: Cuenta Regresiva con Tarjetas Modernas

Tarjetas con degradado limpio y la etiqueta bajo cada número. La elevación al pasar el ratón es sutil y las tarjetas se reordenan en móvil.

html
<style>
  .countdown-modern {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 20px 0;
  }

  .countdown-item {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 25px 20px;
    min-width: 100px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s;
  }

  .countdown-item:hover {
    transform: translateY(-5px);
  }

  .countdown-value {
    font-size: 48px;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
  }

  .countdown-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  @media (max-width: 500px) {
    .countdown-item {
      min-width: 70px;
      padding: 18px 15px;
    }
    .countdown-value {
      font-size: 32px;
    }
    .countdown-label {
      font-size: 11px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .countdown-item {
      transition: none;
    }
    .countdown-item:hover {
      transform: none;
    }
  }
</style>

<div class="countdown-modern" id="countdown1" role="timer">
  <div class="countdown-item">
    <div class="countdown-value" id="days1">00</div>
    <div class="countdown-label">Days</div>
  </div>
  <div class="countdown-item">
    <div class="countdown-value" id="hours1">00</div>
    <div class="countdown-label">Hours</div>
  </div>
  <div class="countdown-item">
    <div class="countdown-value" id="minutes1">00</div>
    <div class="countdown-label">Minutes</div>
  </div>
  <div class="countdown-item">
    <div class="countdown-value" id="seconds1">00</div>
    <div class="countdown-label">Seconds</div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown1').innerHTML = '<p style="font-size: 24px; font-weight: 700; color: #667eea;">Event has started!</p>';
      return;
    }

    var days = Math.floor(distance / 86400000);
    var hours = Math.floor((distance % 86400000) / 3600000);
    var minutes = Math.floor((distance % 3600000) / 60000);
    var seconds = Math.floor((distance % 60000) / 1000);

    document.getElementById('days1').innerHTML = (days < 10 ? '0' : '') + days;
    document.getElementById('hours1').innerHTML = (hours < 10 ? '0' : '') + hours;
    document.getElementById('minutes1').innerHTML = (minutes < 10 ? '0' : '') + minutes;
    document.getElementById('seconds1').innerHTML = (seconds < 10 ? '0' : '') + seconds;
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Para personalizarlo: cambia la línea Date.UTC(2027, 2, 1, 9, 0, 0). Es la única línea que editas. Los meses empiezan en 0 (enero = 0, marzo = 2). Publica y mira cómo corre; si al cargar muestra «Event has started!», tu fecha objetivo está en el pasado.

Opción 2: Cuenta Regresiva Oscura Minimalista

Una barra oscura con separadores de dos puntos, para páginas que ya usan una paleta oscura.

html
<style>
  .countdown-dark {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #1a1a2e;
    padding: 30px 40px;
    border-radius: 12px;
    font-family: 'Monaco', 'Consolas', monospace;
    max-width: 600px;
    margin: 20px auto;
  }

  .cd-block {
    text-align: center;
  }

  .cd-number {
    font-size: 56px;
    font-weight: 600;
    color: #eee;
    line-height: 1;
  }

  .cd-text {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    margin-top: 10px;
    letter-spacing: 1px;
  }

  .cd-separator {
    font-size: 40px;
    color: #4a4a6a;
    padding: 0 5px;
    margin-top: -20px;
  }

  @media (max-width: 500px) {
    .countdown-dark {
      padding: 20px;
      gap: 8px;
    }
    .cd-number {
      font-size: 36px;
    }
    .cd-separator {
      font-size: 28px;
    }
  }
</style>

<div class="countdown-dark" id="countdown2" role="timer">
  <div class="cd-block">
    <div class="cd-number" id="days2">00</div>
    <div class="cd-text">Days</div>
  </div>
  <span class="cd-separator">:</span>
  <div class="cd-block">
    <div class="cd-number" id="hours2">00</div>
    <div class="cd-text">Hours</div>
  </div>
  <span class="cd-separator">:</span>
  <div class="cd-block">
    <div class="cd-number" id="minutes2">00</div>
    <div class="cd-text">Mins</div>
  </div>
  <span class="cd-separator">:</span>
  <div class="cd-block">
    <div class="cd-number" id="seconds2">00</div>
    <div class="cd-text">Secs</div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown2').innerHTML = '<p style="color: #eee; font-size: 24px;">Time is up!</p>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById('days2').innerHTML = (days < 10 ? '0' : '') + days;
    document.getElementById('hours2').innerHTML = (hours < 10 ? '0' : '') + hours;
    document.getElementById('minutes2').innerHTML = (minutes < 10 ? '0' : '') + minutes;
    document.getElementById('seconds2').innerHTML = (seconds < 10 ? '0' : '') + seconds;
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Una cuenta regresiva oscura encaja de forma natural en una sección de tema oscuro. Si esa sección debería seguir el tema del sistema del visitante, combínala con el botón de modo oscuro para Carrd para que el temporizador coincida con la paleta activa.

Para personalizarlo: la misma línea Date.UTC de la Opción 1. Publica, fuerza la recarga y comprueba el contraste en la pantalla de un móvil.

Opción 3: Cuenta Regresiva con Anillos de Progreso Circulares

Anillos de progreso SVG que se vacían a medida que se agota el tiempo. Cada círculo tiene r=42, así que su circunferencia es 2πr ≈ 264: de ahí sale el valor stroke-dasharray="264". Si cambias r, tienes que recalcularlo.

html
<style>
  .countdown-circles {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .circle-item {
    position: relative;
    width: 100px;
    height: 100px;
  }

  .circle-item svg {
    transform: rotate(-90deg);
  }

  .circle-bg {
    fill: none;
    stroke: #e6e6e6;
    stroke-width: 8;
  }

  .circle-progress {
    fill: none;
    stroke: #10b981;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s;
  }

  .circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .circle-value {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
  }

  .circle-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
  }

  @media (max-width: 450px) {
    .circle-item {
      width: 75px;
      height: 75px;
    }
    .circle-value {
      font-size: 22px;
    }
    .circle-label {
      font-size: 9px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .circle-progress {
      transition: none;
    }
  }
</style>

<div class="countdown-circles" id="countdown3" role="timer">
  <!-- Ring math: 2πr ≈ 264 for r=42. Recompute stroke-dasharray if you change r. -->
  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="dayCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="days3">00</div>
      <div class="circle-label">Days</div>
    </div>
  </div>

  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="hourCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="hours3">00</div>
      <div class="circle-label">Hours</div>
    </div>
  </div>

  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="minCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="minutes3">00</div>
      <div class="circle-label">Mins</div>
    </div>
  </div>

  <div class="circle-item">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle class="circle-bg" cx="50" cy="50" r="42"/>
      <circle class="circle-progress" id="secCircle" cx="50" cy="50" r="42" stroke-dasharray="264" stroke-dashoffset="0"/>
    </svg>
    <div class="circle-content">
      <div class="circle-value" id="seconds3">00</div>
      <div class="circle-label">Secs</div>
    </div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);
  var circumference = 264; // 2πr for r=42

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown3').innerHTML = '<p style="font-size: 24px; color: #1f2937;">Event Started!</p>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById('days3').innerHTML = (days < 10 ? '0' : '') + days;
    document.getElementById('hours3').innerHTML = (hours < 10 ? '0' : '') + hours;
    document.getElementById('minutes3').innerHTML = (minutes < 10 ? '0' : '') + minutes;
    document.getElementById('seconds3').innerHTML = (seconds < 10 ? '0' : '') + seconds;

    document.getElementById('dayCircle').style.strokeDashoffset = circumference - (circumference * Math.min(days, 365) / 365);
    document.getElementById('hourCircle').style.strokeDashoffset = circumference - (circumference * hours / 24);
    document.getElementById('minCircle').style.strokeDashoffset = circumference - (circumference * minutes / 60);
    document.getElementById('secCircle').style.strokeDashoffset = circumference - (circumference * seconds / 60);
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Para personalizarlo: la misma línea Date.UTC. Publica y comprueba que los anillos se animan y luego se estabilizan en las fracciones correctas.

Opción 4: Cuenta Regresiva con Animación de Reloj Flip

Tarjetas estilo split-flap clásicas que se voltean cuando cambia un dígito. La opción visualmente más pesada y la que la gente recuerda.

Objetivos a más de 100 días

El campo de días solo tiene dos tarjetas de dígitos. Pasados los 99 días, pad2(days) devuelve tres caracteres y dStr[1] muestra el dígito equivocado. El snippet de abajo lo limita con Math.min(days, 99). ¿Necesitas mostrar tres dígitos reales? Añade un tercer elemento day3Card y pásale dStr[2].

html
<style>
  .countdown-flip {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .flip-section {
    text-align: center;
  }

  .flip-card-container {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
  }

  .flip-card {
    position: relative;
    width: 50px;
    height: 70px;
    perspective: 400px;
  }

  .flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2d2d44 50%, #252538 50%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

  .flip-card-inner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,0.3);
  }

  .flip-label {
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  @keyframes flipAnim {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(-10deg); }
    100% { transform: rotateX(0deg); }
  }

  .flip-card.flip .flip-card-inner {
    animation: flipAnim 0.6s ease-in-out;
  }

  @media (max-width: 500px) {
    .countdown-flip {
      gap: 15px;
    }
    .flip-card {
      width: 38px;
      height: 55px;
    }
    .flip-card-inner {
      font-size: 28px;
    }
    .flip-label {
      font-size: 10px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .flip-card.flip .flip-card-inner {
      animation: none;
    }
  }
</style>

<div class="countdown-flip" id="countdown4" role="timer">
  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="day1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="day2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Days</div>
  </div>

  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="hour1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="hour2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Hours</div>
  </div>

  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="min1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="min2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Minutes</div>
  </div>

  <div class="flip-section">
    <div class="flip-card-container">
      <div class="flip-card" id="sec1Card"><div class="flip-card-inner">0</div></div>
      <div class="flip-card" id="sec2Card"><div class="flip-card-inner">0</div></div>
    </div>
    <div class="flip-label">Seconds</div>
  </div>
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateFlipCard(cardId, value) {
    var card = document.getElementById(cardId);
    var inner = card.querySelector('.flip-card-inner');
    if (inner.innerHTML !== value) {
      card.classList.add('flip');
      inner.innerHTML = value;
      setTimeout(function() { card.classList.remove('flip'); }, 600);
    }
  }

  function pad2(num) {
    return (num < 10 ? '0' : '') + num;
  }

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown4').innerHTML = '<p style="font-size: 24px;">Launch Time!</p>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    var dStr = pad2(Math.min(days, 99)); // two cards only - clamp to avoid 3-digit overflow
    var hStr = pad2(hours);
    var mStr = pad2(minutes);
    var sStr = pad2(seconds);

    updateFlipCard('day1Card', dStr[0]);
    updateFlipCard('day2Card', dStr[1]);
    updateFlipCard('hour1Card', hStr[0]);
    updateFlipCard('hour2Card', hStr[1]);
    updateFlipCard('min1Card', mStr[0]);
    updateFlipCard('min2Card', mStr[1]);
    updateFlipCard('sec1Card', sStr[0]);
    updateFlipCard('sec2Card', sStr[1]);
  }

  var iv = setInterval(updateCountdown, 1000);
  updateCountdown();
})();
</script>

Para personalizarlo: la misma línea Date.UTC. Publica, prueba luego con una fecha a más de 100 días y confirma que las tarjetas muestran «99» y se voltean limpiamente.

Opción 5: Cuenta Regresiva de Texto en Línea

La opción más ligera. Sin cajas ni animación: solo una frase que se actualiza, lo que facilita colocarla entre un titular y un párrafo de texto. Es la que cabe dentro de un encabezado fijo sin romper el layout.

html
<style>
  .countdown-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 24px;
    color: #374151;
    text-align: center;
    padding: 20px;
  }

  .countdown-text .highlight {
    color: #dc2626;
    font-weight: 700;
  }

  @media (max-width: 500px) {
    .countdown-text {
      font-size: 18px;
    }
  }
</style>

<div class="countdown-text" id="countdown5" role="timer">
  Sale ends in <span class="highlight" id="textDays">0</span> days,
  <span class="highlight" id="textHours">0</span> hours,
  <span class="highlight" id="textMins">0</span> minutes
</div>

<script>
(function() {
  // March 1, 2027 at 09:00 UTC - Date.UTC months are 0-indexed too (2 = March)
  var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

  function updateCountdown() {
    var distance = targetDate - Date.now();

    if (distance < 0) {
      clearInterval(iv);
      document.getElementById('countdown5').innerHTML = '<span class="highlight">Sale has ended!</span>';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

    document.getElementById('textDays').innerHTML = days;
    document.getElementById('textHours').innerHTML = hours;
    document.getElementById('textMins').innerHTML = minutes;
  }

  // no seconds shown, so a 60-second tick is enough
  var iv = setInterval(updateCountdown, 60000);
  updateCountdown();
})();
</script>

Esta corre una vez por minuto en lugar de cada segundo, ya que no muestra segundos. Combina bien con una tabla de precios cuando la fecha límite es la razón para comprar ahora.

Para personalizarla: la misma línea Date.UTC. Publica y comprueba que la frase se ajusta bien en móvil.

Configura tu Fecha Objetivo (a Prueba de Zonas Horarias)

Cada snippet define su fecha límite en una línea:

javascript
var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

Esta es la línea que cambias. Date.UTC(year, month, day, hour, minute, second) acepta los mismos argumentos que new Date(...), y los meses siguen empezando en 0: enero = 0, marzo = 2, diciembre = 11.

Ejemplos con fechas futuras:

  • 1 de marzo de 2027 a las 09:00 UTC: Date.UTC(2027, 2, 1, 9, 0, 0)
  • 25 de diciembre de 2027 a las 09:00 UTC: Date.UTC(2027, 11, 25, 9, 0, 0)
  • 4 de julio de 2027 a las 18:00 UTC: Date.UTC(2027, 6, 4, 18, 0, 0)

Un hábito que te ahorra republicar: mientras pruebas, elige una fecha cómodamente en el futuro. Una cuenta regresiva cuyo objetivo ya pasó muestra su mensaje de fin al cargar, lo que parece roto aunque el código esté bien. Cuando tengas la fecha real, cambia el año en lugar de dejar una fecha vieja.

Fechas Límite: Hora Local del Visitante vs UTC

Date.UTC(...) y new Date(y, m, d) parecen intercambiables, pero no lo son:

  • new Date(2027, 2, 1) cuenta hasta la medianoche en la zona horaria de cada visitante. Un visitante en Londres llega a cero cinco horas antes que uno en Nueva York. Para una fecha límite global (un lanzamiento, el fin de una oferta, el inicio de un webinar), eso es un bug real: algunos visitantes ven «Sale has ended!» mientras otros aún ven horas restantes.
  • Date.UTC(2027, 2, 1, 9, 0, 0) es un instante fijo. El temporizador de cada visitante llega a cero en el mismo momento; cada navegador solo renderiza el tiempo restante contra su propio reloj.

Regla general: fecha límite global → Date.UTC. Evento local (apertura de puertas, promo en tienda) → new Date(y, m, d) con hora local del visitante está bien.

Date.UTC

javascript
var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0);

Cadena ISO

javascript
var targetDate = new Date("2027-03-01T09:00:00Z").getTime();

Ambas son el mismo instante: 1 de marzo de 2027 a las 09:00 UTC. Elige la sintaxis que prefieras leer dentro de seis meses.

El mes empieza en 0

Tanto en new Date(y, m, d) como en Date.UTC(y, m, d, ...), enero es el mes 0 y diciembre el 11. A todos nos pica una vez. Si tu cuenta regresiva se desvía exactamente un mes, esta es la razón.

Date.UTC()una fecha límitecero: mismo instanteLondres y Nueva York llegan juntosnew Date()medianoche localLondres 00:00Nueva York 00:00dos instantes distintos, 5 horas de diferencia
new Date() cuenta hasta la medianoche local de cada visitante. Date.UTC() es un mismo instante para todos.

Personalizar Colores y Fuentes de la Cuenta Regresiva

Cada estilo usa colores CSS planos, así que adaptarlo a tu marca es editar un hexadecimal:

Los fondos con degradado toman dos colores hex:

css
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Change the hex colors to match your brand */

Los colores sólidos son aún más simples:

css
background: #1a1a2e;  /* Dark background */
color: #10b981;       /* Accent color */

Los anillos circulares toman dos colores de trazo:

css
stroke: #10b981;  /* Progress color */
stroke: #e6e6e6;  /* Background circle */

Todos los snippets usan pilas de fuentes del sistema para funcionar en todas partes sin coste de carga. Si quieres la fuente de tu marca, Pro Standard y superior admiten «Local Fonts»: Carrd añadió seis más en agosto de 2026 (Geist Pixel, Smooch Sans, Tangerine y otras). Carga la fuente en el sitio y luego sobrescríbela dentro del bloque <style> del embed:

css
.countdown-value { font-family: 'Smooch Sans', sans-serif; }

Mantenlo accesible

Los estilos animados de este artículo incluyen una protección con prefers-reduced-motion y cada contenedor lleva role="timer". Si adaptas el código a tu propia variante, conserva este bloque:

css
@media (prefers-reduced-motion: reduce) {
  .countdown-item:hover { transform: none; }
  .flip-card.flip .flip-card-inner { animation: none; }
  .circle-progress { transition: none; }
}

Evita aria-live en un temporizador que marca segundos. Una región en vivo anunciaría cada tick a los lectores de pantalla.

La misma técnica de embed cubre otras inserciones: un aviso de cookies funciona exactamente igual.

Qué Pasa Cuando la Cuenta Regresiva Termina

Cada snippet sustituye el temporizador por un mensaje al llegar a cero y detiene su propio intervalo, así que no sigue corriendo invisiblemente para siempre. Dos patrones cubren la mayoría de las necesidades:

Mostrar un mensaje

javascript
if (distance < 0) {
  clearInterval(iv);
  document.getElementById('countdown1').innerHTML = '<p>We are live!</p>';
  return;
}

Redirigir al vencer

javascript
if (distance < 0) {
  clearInterval(iv);
  window.location.href = 'https://yoursite.com/launch';
  return;
}

Detén el reloj

setInterval sigue disparándose después de la fecha límite a menos que lo canceles. La llamada clearInterval(iv) en estos snippets apaga el temporizador en el momento en que se ejecuta el mensaje o la redirección. Sin ella, el intervalo sigue corriendo sin hacer nada.

Cuando el reloj llega a cero, cambiar la CTA por un modal emergente que capture la lista de espera es el siguiente paso.

Apunta la redirección a una página de tu propio dominio personalizado para que la URL sobreviva a un rediseño. Pro Plus (49 $/año) también incluye «Redirects» nativos y una opción «Framing» en Publish → Settings, pero una redirección JavaScript de tres líneas dentro del embed basta para la mayoría de las cuentas regresivas.

Una nota de seguridad, por si estás valorando un temporizador basado en iframe: los sitios de Carrd publicados envían content-security-policy: frame-ancestors https://carrd.com y x-frame-options: deny. Eso solo restringe quién puede incrustar tu página de Carrd en un iframe. Los scripts en línea como estos snippets funcionan sin problema, igual que los scripts de widgets de terceros.

Prueba Carrd.co

Embed Personalizado vs. Widgets de Cuenta Regresiva de Terceros

Servicios como el Elfsight Countdown Timer se pegan en el mismo elemento Embed que acabas de usar, y son productos reales con editores visuales, modo de cuenta ascendente e inicios diferidos. El problema es el coste. A octubre de 2026, Elfsight tiene cuatro niveles: Lite 0 $, Basic 5 $/mes, Pro 10 $/mes, Premium 20 $/mes, por widget: entre 60 y 240 $/año en cuanto sales del nivel gratuito. Comprueba el precio actual antes de presupuestar; el precio de los widgets cambia a menudo y la base de facturación no es obvia en su web.

Embed personalizado (este artículo) Widget de terceros
Coste anual 0 $ extra (Pro Standard es necesario de todos modos) 5-20 $/mes por widget (60-240 $/año) además de Carrd
Peticiones externas Ninguna JS del proveedor en cada vista de página
Edición sin código No: editas el snippet Sí: panel visual
Insignia del proveedor Ninguna Los niveles gratuitos suelen añadir una

El embed personalizado gana en coste y peso de página. Ya necesitas Pro Standard para cualquier embed, así que el precio marginal de estos snippets es cero, y nada llama a casa. Un widget solo se justifica si necesitas lo que el código no te da fácilmente:

  • Un editor visual que un cliente no técnico pueda ajustar
  • Modo de cuenta ascendente (tiempo desde un evento, no hasta él)
  • El mismo temporizador sincronizado en varios sitios desde un solo panel

Una cosa que confunde a la gente: el elemento Widget de Carrd admite Stripe, Gumroad, Facebook, PayPal y Typeform. Ahí no hay cuenta regresiva. La cuenta regresiva de Carrd vive en el elemento Timer, que es separado, y cuando te quedas corto con sus opciones de estilo, acabas en el elemento Embed.

Solución de Problemas y Preguntas Frecuentes

¿Por qué no se ve mi cuenta regresiva en el editor de Carrd?

Los elementos Embed no renderizan nada en el editor: la documentación de Carrd lo afirma directamente. Publica el sitio y fuerza la recarga de la página en vivo. Si sigue en blanco después de publicar, abre DevTools y busca un error de script en la consola. Si también falta después de publicar, abre More Actions → Elements…: desde octubre de 2026 el panel muestra si un elemento está excluido de la publicación u oculto con CSS.

¿Por qué mi cuenta regresiva dice «Event has started!» nada más cargar?

Tu fecha objetivo está en el pasado. Revisa la línea Date.UTC(...) al inicio del script y muévela hacia adelante. Recuerda que el mes empieza en 0: Date.UTC(2027, 2, 1) es el 1 de marzo de 2027, no el 1 de febrero.

¿Por qué mi cuenta regresiva llega a cero a la hora equivocada?

Probablemente usaste new Date(y, m, d), que cuenta hasta la medianoche en la zona horaria local de cada visitante. Para una fecha límite que debe llegar en el mismo instante en todo el mundo, cambia a Date.UTC(y, m, d, h, min, s) o new Date("2027-03-01T09:00:00Z").getTime().

¿Necesito un plan de pago para un temporizador de cuenta regresiva en Carrd?

Sí. El elemento Embed requiere Pro Standard o superior, mínimo 19 $/año. Los planes Free y Pro Lite no pueden añadir código personalizado en absoluto, así que no hay alternativa gratuita dentro de Carrd.

¿Puedo añadir dos o más cuentas regresivas en una página?

Sí. Los distintos estilos coexisten porque sus IDs difieren (de countdown1 a countdown5). Dos copias del mismo estilo chocan: renombra cada ID de la segunda copia y actualiza las cadenas getElementById de su script para que coincidan.

¿Por qué el reloj flip muestra días incorrectos pasados los 100 días?

El campo de días tiene dos tarjetas de dígitos, así que no puede mostrar un número de tres cifras. pad2(150) devuelve «150» y dStr[1] toma el dígito del medio. El snippet lo limita con Math.min(days, 99), o puedes añadir una tercera tarjeta para tres dígitos reales.

¿Son accesibles estos snippets de cuenta regresiva?

En su mayoría, sí. Cada contenedor tiene role="timer" y los estilos animados incluyen una protección con prefers-reduced-motion que desactiva los efectos de volteo y hover para los usuarios que lo piden. No añadas aria-live a un temporizador que marca segundos; una región en vivo que anuncia cada tick es peor que no anunciar nada.

¿Puedo probar el temporizador en la prueba gratuita de Pro de 7 días de Carrd?

Probablemente no. La prueba cubre formularios, widgets, conectar un dominio personalizado a Carrd y la analítica nativa de Carrd, pero el elemento Embed (código personalizado) no está en la lista documentada de funciones de la prueba en carrd.com/docs/pro/trial. Necesitarás Pro Standard (19 $/año) para pegar y publicar estos snippets.

Conclusión

El elemento «Timer» integrado de Carrd cubre lo básico, pero un embed personalizado es la forma de conseguir una cuenta regresiva que combine con tu diseño. Elige un estilo, cambia una línea Date.UTC, publica y comprueba que corre. Gastarás menos que con un widget y no cargarás ningún script externo.

Combina el temporizador con un modal emergente para captar emails, un botón de WhatsApp para que los visitantes te contacten cuando el reloj llegue a cero, y un aviso de cookies si tienes tráfico de la UE. La lista de tutoriales de arriba tiene el resto de montajes con código personalizado para Carrd.

Prueba Carrd.co
#Carrd#Countdown Timer#CSS

Artículos relacionados