12 CSS Retro UI Designs 05 / 12

Retro Cassette Player UI Web Component

A skeuomorphic tape deck modelled in pure CSS gradients — moulded plastic body with inset highlights, a recessed window with two spinning reels, an LCD with an animated VU meter, real pressable transport keys with travel, and three rotary knobs with pointer ticks.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ret-05">
  <div class="ret-05__deck">
    <div class="ret-05__brand">
      <b>cassettone</b>
      <span>Stereo · Auto-Reverse · Dolby</span>
    </div>

    <div class="ret-05__window">
      <div class="ret-05__label">◦ SIDE A · MIXTAPE '88 ◦</div>
      <div class="ret-05__tape">
        <div class="ret-05__reel"></div>
        <div class="ret-05__reel" style="animation-duration:3.4s"></div>
      </div>
    </div>

    <div class="ret-05__lcd">
      <span class="t">▶ 02:14 / 04:51</span>
      <div class="ret-05__meter"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    </div>

    <div class="ret-05__transport">
      <button class="ret-05__key">⏮</button>
      <button class="ret-05__key ret-05__key--play">▶</button>
      <button class="ret-05__key">⏸</button>
      <button class="ret-05__key">⏭</button>
      <button class="ret-05__key">⏹</button>
    </div>

    <div class="ret-05__knobs">
      <div class="ret-05__knobwrap">
        <div class="ret-05__knob ret-05__knob--1"></div>
        <div class="ret-05__dots"><i></i><i></i><i></i><i></i><i></i></div>
        <small>Volume</small>
      </div>
      <div class="ret-05__knobwrap">
        <div class="ret-05__knob ret-05__knob--2"></div>
        <div class="ret-05__dots"><i></i><i></i><i></i><i></i><i></i></div>
        <small>Bass</small>
      </div>
      <div class="ret-05__knobwrap">
        <div class="ret-05__knob ret-05__knob--3"></div>
        <div class="ret-05__dots"><i></i><i></i><i></i><i></i><i></i></div>
        <small>Treble</small>
      </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Oswald:wght@300;500;700&display=swap');

.ret-05, .ret-05 *, .ret-05 *::before, .ret-05 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-05 ::selection{background:#e8743b;color:#1c140e}

.ret-05{
  --case:#d8c5a8;
  --case-d:#b39d7c;
  --metal:#c9ccd1;
  --dark:#2a2420;
  --orange:#e8743b;
  --cream:#f3e9d6;
  --led:#7dff4f;
  font-family:'Oswald',sans-serif;
  background:radial-gradient(120% 100% at 50% 0%,#5a4632,#2b211a 70%);
  min-height:100vh;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);
  color:var(--dark);
}
/* the plastic body: stacked gradients + inset highlights + drop shadow */
.ret-05__deck{
  width:min(560px,100%);
  background:
    linear-gradient(160deg,#e8d7b8,#c3ad88 55%,#a98f6b);
  border-radius:22px;
  padding:26px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -4px 8px rgba(0,0,0,.28),
    0 30px 60px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.4);
  position:relative;
}
.ret-05__deck::before{content:'';position:absolute;inset:11px;border-radius:14px;border:1px solid rgba(255,255,255,.25);pointer-events:none}
.ret-05__brand{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.ret-05__brand b{font-family:'Major Mono Display';font-size:1.5rem;letter-spacing:.06em;color:#3a2f25;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.ret-05__brand span{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#6b5a44;font-weight:500}

/* cassette window: dark recess with spinning reels */
.ret-05__window{
  background:linear-gradient(180deg,#1b1612,#322820);
  border-radius:12px;padding:22px;margin-bottom:22px;
  box-shadow:inset 0 4px 10px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.4);
  position:relative;overflow:hidden;
}
.ret-05__tape{display:flex;align-items:center;justify-content:center;gap:64px;position:relative}
.ret-05__tape::before{content:'';position:absolute;top:50%;left:18%;right:18%;height:10px;transform:translateY(-50%);
  background:linear-gradient(180deg,#1a120b,#0d0805);border-radius:2px;box-shadow:inset 0 1px 1px rgba(0,0,0,.8)}
.ret-05__reel{width:74px;height:74px;border-radius:50%;position:relative;z-index:2;
  background:radial-gradient(circle at 35% 30%,#5a5048,#221c16 70%);
  box-shadow:inset 0 0 0 6px #15110d,inset 0 0 14px rgba(0,0,0,.9),0 0 0 2px #3a3128;
  animation:ret-05-spin 3s linear infinite}
.ret-05__reel::before{content:'';position:absolute;inset:24px;border-radius:50%;background:repeating-conic-gradient(#d8cdbe 0 12deg,#8a7d6c 12deg 24deg);box-shadow:0 0 0 3px #15110d}
.ret-05__reel::after{content:'';position:absolute;inset:32px;border-radius:50%;background:radial-gradient(circle,#2a221a,#0d0805)}
@keyframes ret-05-spin{to{transform:rotate(360deg)}}
.ret-05__label{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:'Major Mono Display';font-size:.62rem;letter-spacing:.2em;color:var(--orange);z-index:3;white-space:nowrap}

/* LCD + level meter */
.ret-05__lcd{display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:#2f3a2c;border-radius:8px;padding:10px 16px;margin-bottom:22px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7);font-family:'Major Mono Display';color:var(--led);text-shadow:0 0 6px rgba(125,255,79,.6)}
.ret-05__lcd .t{font-size:1.1rem;letter-spacing:.05em}
.ret-05__meter{display:flex;gap:3px;align-items:flex-end;height:22px}
.ret-05__meter i{width:5px;background:var(--led);border-radius:1px;animation:ret-05-eq 1.1s ease-in-out infinite}
.ret-05__meter i:nth-child(1){height:30%;animation-delay:0s}
.ret-05__meter i:nth-child(2){height:60%;animation-delay:.15s}
.ret-05__meter i:nth-child(3){height:95%;animation-delay:.3s;background:#ffd23f}
.ret-05__meter i:nth-child(4){height:50%;animation-delay:.45s}
.ret-05__meter i:nth-child(5){height:75%;animation-delay:.6s;background:#ffd23f}
.ret-05__meter i:nth-child(6){height:40%;animation-delay:.75s}
@keyframes ret-05-eq{50%{height:20%}}

/* transport buttons: real pressable plastic */
.ret-05__transport{display:flex;gap:12px;margin-bottom:24px}
.ret-05__key{flex:1;height:48px;border-radius:7px;border:none;cursor:pointer;font-size:1rem;color:#2a2018;
  background:linear-gradient(180deg,#efe2cb,#c7b18c);
  box-shadow:0 4px 0 #9a805e,inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .06s,box-shadow .06s;display:grid;place-items:center}
.ret-05__key:hover{filter:brightness(1.04)}
.ret-05__key:active{transform:translateY(4px);box-shadow:0 0 0 #9a805e,inset 0 1px 3px rgba(0,0,0,.3)}
.ret-05__key--play{background:linear-gradient(180deg,#f29a5c,#d8612a);color:#fff;box-shadow:0 4px 0 #a8451a,inset 0 1px 0 rgba(255,255,255,.5)}
.ret-05__key--play:active{box-shadow:0 0 0 #a8451a,inset 0 1px 3px rgba(0,0,0,.4)}

/* knobs */
.ret-05__knobs{display:flex;justify-content:space-around;align-items:flex-start}
.ret-05__knobwrap{display:flex;flex-direction:column;align-items:center;gap:9px}
.ret-05__knob{width:62px;height:62px;border-radius:50%;cursor:grab;position:relative;
  background:conic-gradient(from -135deg,#3a322a,#6a5e4f 50%,#2a241e);
  box-shadow:0 5px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.6)}
.ret-05__knob::before{content:'';position:absolute;top:6px;left:50%;width:4px;height:18px;background:var(--orange);border-radius:2px;transform:translateX(-50%);box-shadow:0 0 5px rgba(232,116,59,.7)}
.ret-05__knob--2{transform:rotate(80deg)}
.ret-05__knob--3{transform:rotate(-70deg)}
.ret-05__knobwrap small{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#5a4a36;font-weight:600}
.ret-05__dots{position:relative;width:62px;height:14px;margin-top:-4px}
.ret-05__dots i{position:absolute;width:3px;height:3px;border-radius:50%;background:#5a4a36;top:0}
.ret-05__dots i:nth-child(1){left:0}
.ret-05__dots i:nth-child(2){left:30%;top:-3px}
.ret-05__dots i:nth-child(3){left:50%;top:-5px}
.ret-05__dots i:nth-child(4){left:70%;top:-3px}
.ret-05__dots i:nth-child(5){right:0}

@media(max-width:480px){.ret-05__tape{gap:30px}.ret-05__knob{width:50px;height:50px}}
@media (prefers-reduced-motion: reduce){.ret-05__reel,.ret-05__meter i{animation:none !important}}

More from 12 CSS Retro UI Designs

90s Website Guestbook WidgetY2K Style Web UI KitRetro Clothing Store Web UI DesignASCII Art Web Interface CodeRetro Desktop Portfolio Website TemplateRetro Windows 95 UI (CSS Template)Retro Futuristic Terminal UI Code8 Bit Pixel Art UI Elements & ButtonsNeo Brutalist UI Components ExamplesVaporwave Aesthetic Website Theme DesignRetro Arcade Game UI Kit
View the full collection →

Search CodeFronts

Loading…

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