6 CSS Countdown Timers 01 / 06

E-Commerce Flash Sales & Product Pages

A bold, high-contrast product card with a brutalist offset shadow and split-panel box-style D/H/M/S clock.

Best forlimited-edition drops, daily deals, daily-deal email landing pages, and product detail pages where the deadline is the headline.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="cdt-fls" aria-label="Flash sale countdown timer demo">
  <div class="cdt-fls__card">
    <div class="cdt-fls__badge">SALE</div>
    <div class="cdt-fls__img-zone"><span>AERO·9</span></div>
    <div class="cdt-fls__info">
      <div class="cdt-fls__cat">Limited Drop · Footwear</div>
      <h2 class="cdt-fls__title">Aero 9 Carbon Runner</h2>
      <div class="cdt-fls__price-row">
        <span class="cdt-fls__price">$89</span>
        <span class="cdt-fls__was">$179</span>
        <span class="cdt-fls__off">-50%</span>
      </div>
      <div class="cdt-fls__urgency"><span class="cdt-fls__pulse" aria-hidden="true"></span> Flash sale ends in</div>
      <div class="cdt-fls__timer" role="timer" aria-live="polite" aria-atomic="true">
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="d">00</span><span class="cdt-fls__lab">Days</span></div>
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="h">00</span><span class="cdt-fls__lab">Hours</span></div>
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="m">00</span><span class="cdt-fls__lab">Mins</span></div>
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="s">00</span><span class="cdt-fls__lab">Secs</span></div>
      </div>
      <button class="cdt-fls__buy" type="button">Grab It Now</button>
      <p class="cdt-fls__stock">Only <b>12 pairs</b> left at this price</p>
    </div>
  </div>
</section>
/* ─── 01 Flash Sale — brutalist product card ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

.cdt-fls {
  --cdt-fls-ink: #0a0a0a;
  --cdt-fls-paper: #f4f1ea;
  --cdt-fls-flame: #ff3b14;
  --cdt-fls-gold: #ffcf3a;

  position: relative;
  width: 100%;
  min-height: 520px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,59,20,0.08), transparent 40%),
    var(--cdt-fls-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.cdt-fls *, .cdt-fls *::before, .cdt-fls *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-fls__card {
  background: var(--cdt-fls-ink); color: var(--cdt-fls-paper);
  width: 100%; max-width: 460px;
  border-radius: 4px;
  box-shadow: 14px 14px 0 var(--cdt-fls-flame);
  position: relative; overflow: hidden;
}
.cdt-fls__card::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.cdt-fls__badge {
  position: absolute; top: 22px; right: -42px;
  background: var(--cdt-fls-flame); color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px; letter-spacing: 2px;
  padding: 8px 50px; transform: rotate(45deg); z-index: 3;
}
.cdt-fls__img-zone {
  height: 180px;
  background: linear-gradient(135deg, #2a2a2a, #111), var(--cdt-fls-ink);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid var(--cdt-fls-flame);
}
.cdt-fls__img-zone span {
  font-family: 'Archivo Black', sans-serif;
  font-size: 56px; color: var(--cdt-fls-flame);
  opacity: 0.85; text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  transform: rotate(-6deg);
}
.cdt-fls__info { padding: 24px 28px 30px; position: relative; z-index: 2; }
.cdt-fls__cat { font-size: 11px; letter-spacing: 4px; color: var(--cdt-fls-gold); text-transform: uppercase; }
.cdt-fls__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px; line-height: 1.05; margin: 8px 0 14px; text-transform: uppercase;
  color: var(--cdt-fls-paper);
}
.cdt-fls__price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.cdt-fls__price { font-family: 'Archivo Black', sans-serif; font-size: 32px; color: var(--cdt-fls-flame); }
.cdt-fls__was { font-size: 16px; color: #777; text-decoration: line-through; }
.cdt-fls__off {
  margin-left: auto;
  background: var(--cdt-fls-gold); color: var(--cdt-fls-ink);
  font-weight: 700; padding: 4px 10px; font-size: 13px;
}
.cdt-fls__urgency {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cdt-fls-flame); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.cdt-fls__pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cdt-fls-flame);
  animation: cdt-fls-blip 1s infinite;
}
@keyframes cdt-fls-blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,59,20,.6); }
  50%      { opacity: 0.4; box-shadow: 0 0 0 8px rgba(255,59,20,0); }
}
.cdt-fls__timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.cdt-fls__seg {
  background: var(--cdt-fls-paper); color: var(--cdt-fls-ink);
  border-radius: 3px; padding: 12px 4px 6px;
  text-align: center; position: relative; overflow: hidden;
}
.cdt-fls__seg::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: rgba(0,0,0,0.04);
}
.cdt-fls__num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 30px; line-height: 1; position: relative; z-index: 1;
  display: block;
}
.cdt-fls__lab {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: #888; margin-top: 6px; display: block;
}
.cdt-fls__buy {
  width: 100%;
  background: var(--cdt-fls-flame); color: #fff;
  border: none; padding: 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.cdt-fls__buy:hover  { background: var(--cdt-fls-gold); color: var(--cdt-fls-ink); transform: translateY(-2px); }
.cdt-fls__buy:active { transform: translateY(0); }
.cdt-fls__buy:focus-visible { outline: 2px solid var(--cdt-fls-gold); outline-offset: 3px; }
.cdt-fls__stock { text-align: center; font-size: 11px; color: #999; margin-top: 12px; letter-spacing: 1px; }
.cdt-fls__stock b { color: var(--cdt-fls-gold); }

@media (prefers-reduced-motion: reduce) {
  .cdt-fls__pulse, .cdt-fls__buy { animation: none; transition: none; }
}
(() => {
  const root = document.querySelector('.cdt-fls');
  if (!root) return;
  const target = Date.now() + (1*86400 + 7*3600 + 42*60 + 18) * 1000;
  const pad = (n) => String(n).padStart(2, '0');
  const els = {
    d: root.querySelector('[data-cdt-fls="d"]'),
    h: root.querySelector('[data-cdt-fls="h"]'),
    m: root.querySelector('[data-cdt-fls="m"]'),
    s: root.querySelector('[data-cdt-fls="s"]'),
  };
  function tick() {
    const diff = Math.max(0, target - Date.now());
    els.d.textContent = pad(Math.floor(diff / 86400000));
    els.h.textContent = pad(Math.floor(diff % 86400000 / 3600000));
    els.m.textContent = pad(Math.floor(diff % 3600000 / 60000));
    els.s.textContent = pad(Math.floor(diff % 60000 / 1000));
  }
  tick();
  setInterval(tick, 1000);
})();

More from 6 CSS Countdown Timers

Website Sticky Announcement Bars (Site-Wide)Shopping Cart Expiration Timers"Coming Soon" & Product Launch Landing PagesCircular Progress & Activity Timers (SaaS/Fitness/EdTech)Retro Flip-Clock Timers
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →