Skip to content

Stopwatch

A copy-paste watch faces & clocks component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Watch Faces & ClocksHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-sw" role="img" aria-label="Stopwatch 00:42.31">
  <div class="nuda-sw__crown"></div>
  <div class="nuda-sw__face">
    <svg class="nuda-sw__svg" viewBox="0 0 120 120">
      <circle cx="60" cy="60" r="54" class="nuda-sw__bezel" />
      <line x1="60" y1="60" x2="60" y2="14" class="nuda-sw__hand" />
    </svg>
    <div class="nuda-sw__time">00:42.<span>31</span></div>
    <div class="nuda-sw__laps">LAP 03 · 00:14.06</div>
  </div>
</div>
CSS
/* Stopwatch
   Sweeping seconds hand with a digital readout and last-lap marker.
   Customize: --accent, --bg */

.nuda-sw {
  --accent: #e4ff54;
  --bg: #0c0c10;
  position: relative;
  display: inline-block;
  padding: 14px;
  background: var(--bg);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-sw__crown {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 14px;
  height: 8px;
  margin-left: -7px;
  background: #1a1a20;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.nuda-sw__face {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #15151a, #09090b);
  display: grid;
  place-items: center;
}

.nuda-sw__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nuda-sw__bezel {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}

.nuda-sw__hand {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 60px 60px;
  animation: nuda-sw-sweep 60s linear infinite;
  filter: drop-shadow(0 0 4px var(--accent));
}

.nuda-sw__time {
  font: 600 22px ui-monospace, Menlo, monospace;
  color: #fafafa;
  z-index: 1;
}

.nuda-sw__time span {
  color: var(--accent);
  font-size: 18px;
}

.nuda-sw__laps {
  position: absolute;
  bottom: 24px;
  font: 500 9px system-ui;
  letter-spacing: 1.5px;
  color: #63636e;
  z-index: 1;
}

@keyframes nuda-sw-sweep {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-sw__hand { animation: none; }
}

How to use Stopwatch

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More watch faces & clocks components

← Browse all NudaUI components