Stopwatch
A copy-paste watch faces & clocks component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Watch Faces & ClocksHTMLCSSany framework
00:42.31
LAP 03 · 00:14.06
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.