Smartwatch Mockup — Free CSS Watch Face Device Snippet

<div class="sw-stage">
  <div class="sw-watch">
    <span class="sw-band sw-top"></span>
    <span class="sw-band sw-bottom"></span>
    <span class="sw-crown"></span>
    <span class="sw-btn"></span>
    <div class="sw-screen" id="swScreen">
      <div class="sw-face" id="swFace">
        <div class="sw-time" id="swTime">9:41</div>
        <div class="sw-date" id="swDate">MON 29</div>
        <div class="sw-rings">
          <svg viewBox="0 0 100 100" width="92">
            <circle class="sw-bg" cx="50" cy="50" r="42"/><circle class="sw-r r1" cx="50" cy="50" r="42"/>
            <circle class="sw-bg" cx="50" cy="50" r="32"/><circle class="sw-r r2" cx="50" cy="50" r="32"/>
            <circle class="sw-bg" cx="50" cy="50" r="22"/><circle class="sw-r r3" cx="50" cy="50" r="22"/>
          </svg>
        </div>
        <div class="sw-complications"><span>72<small>bpm</small></span><span>8.2<small>k</small></span></div>
      </div>
    </div>
  </div>
  <button type="button" class="sw-toggle" id="swToggle">Close rings</button>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#e2e8f0;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px}
.sw-stage{text-align:center}

.sw-watch{position:relative;width:172px;height:200px;background:#0b1220;border-radius:48px;box-shadow:0 24px 44px -20px rgba(15,23,42,.55),inset 0 0 0 2px #1e293b;display:flex;align-items:center;justify-content:center}
.sw-band{position:absolute;left:50%;transform:translateX(-50%);width:104px;background:#475569;z-index:-1}
.sw-top{bottom:calc(100% - 26px);height:70px;border-radius:18px 18px 0 0;background:linear-gradient(#334155,#475569)}
.sw-bottom{top:calc(100% - 26px);height:70px;border-radius:0 0 18px 18px;background:linear-gradient(#475569,#334155)}
.sw-crown{position:absolute;right:-5px;top:64px;width:7px;height:26px;background:#94a3b8;border-radius:3px}
.sw-btn{position:absolute;right:-3px;top:104px;width:4px;height:34px;background:#334155;border-radius:3px}

.sw-screen{width:148px;height:176px;border-radius:40px;overflow:hidden;background:#000;color:#fff;display:flex;align-items:center;justify-content:center}
.sw-face{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px}
.sw-time{font-size:34px;font-weight:700;letter-spacing:-1px;color:#34d399;font-variant-numeric:tabular-nums;line-height:1}
.sw-date{font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:1px;margin-top:2px}
.sw-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.32}
.sw-bg{fill:none;stroke:#1e293b;stroke-width:7}
.sw-r{fill:none;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s ease}
.r1{stroke:#fb2576}.r2{stroke:#a3e635}.r3{stroke:#22d3ee}
.sw-complications{display:flex;gap:14px;margin-top:auto;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.sw-complications small{font-size:9px;font-weight:700;color:#94a3b8;margin-left:1px}

.sw-toggle{margin-top:22px;background:#0f172a;color:#fff;border:none;border-radius:9px;padding:9px 16px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.sw-toggle:hover{background:#1e293b}

var timeEl = document.getElementById('swTime');
var dateEl = document.getElementById('swDate');
var DAYS = ['SUN','MON','TUE','WED','THU','FRI','SAT'];

function tick() {
  var d = new Date();
  var h = d.getHours() % 12 || 12;
  timeEl.textContent = h + ':' + ('0' + d.getMinutes()).slice(-2);
  dateEl.textContent = DAYS[d.getDay()] + ' ' + d.getDate();
}
tick();
setInterval(tick, 5000);

// Animate the activity rings using stroke-dasharray, like Apple Watch.
var rings = [
  { el: document.querySelector('.r1'), r: 42, pct: 0 },
  { el: document.querySelector('.r2'), r: 32, pct: 0 },
  { el: document.querySelector('.r3'), r: 22, pct: 0 }
];
rings.forEach(function (ring) {
  var c = 2 * Math.PI * ring.r;
  ring.circ = c;
  ring.el.style.strokeDasharray = c;
  ring.el.style.strokeDashoffset = c;
});

var closed = false;
function setRings(targets) {
  rings.forEach(function (ring, i) {
    ring.el.style.strokeDashoffset = ring.circ * (1 - targets[i]);
  });
}

document.getElementById('swToggle').addEventListener('click', function () {
  closed = !closed;
  document.getElementById('swScreen').querySelector('.sw-rings').style.opacity = closed ? '1' : '.32';
  setRings(closed ? [0.86, 0.72, 0.95] : [0, 0, 0]);
  this.textContent = closed ? 'Reset rings' : 'Close rings';
});