12 CSS Retro UI Designs 07 / 12

Retro Arcade Game UI Kit

A full arcade cabinet UI kit: an animated rainbow marquee, a bezelled CRT attract-screen with scanlines, hue-shifting logo, marching sprites and a blinking PUSH START, plus a control panel with a wiggling joystick and four glossy convex pressable buttons.

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

The code

<div class="ret-07">
  <div class="ret-07__cab">
    <div class="ret-07__marquee"><b>NEON RAIDERS</b></div>

    <div class="ret-07__bezel">
      <div class="ret-07__screen">
        <span class="ret-07__hi">HI 999990</span>
        <span class="ret-07__credit">1UP 042150</span>
        <div class="ret-07__logo">NEON<br>RAIDERS</div>
        <div class="ret-07__sprites">👾 🛸 👾 🛸 👾</div>
        <div class="ret-07__sub">© 1986 CODEFRONTS<br><i>insert coin to continue</i></div>
        <div class="ret-07__start">▶ PUSH START ◀</div>
      </div>
    </div>

    <div class="ret-07__panel">
      <div class="ret-07__joy">
        <span class="base"></span><span class="stick"></span><span class="ball"></span>
      </div>
      <div class="ret-07__buttons">
        <button class="ret-07__b ret-07__b--r"></button>
        <button class="ret-07__b ret-07__b--y"></button>
        <button class="ret-07__b ret-07__b--c"></button>
        <button class="ret-07__b ret-07__b--g"></button>
      </div>
    </div>

    <div class="ret-07__coin"><span>◉ INSERT COIN ◉</span></div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');

.ret-07, .ret-07 *, .ret-07 *::before, .ret-07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-07 ::selection{background:#ffcb05;color:#10001f}

.ret-07{
  --cab:#1b0033;
  --cab2:#33005c;
  --magenta:#ff2e97;
  --yellow:#ffcb05;
  --cyan:#00f0ff;
  --green:#39ff14;
  --screen:#05010f;
  font-family:'Press Start 2P',monospace;
  background:
    radial-gradient(circle at 50% 0%,#3a006b,#10001f 70%);
  min-height:100vh;
  display:grid;place-items:center;
  padding:clamp(14px,3vw,40px);
  color:#fff;
}
.ret-07__cab{
  width:min(480px,100%);
  background:linear-gradient(180deg,var(--cab2),var(--cab));
  border-radius:30px 30px 14px 14px;
  padding:18px;
  position:relative;
  box-shadow:0 0 0 4px #000,0 0 0 8px var(--magenta),0 0 40px rgba(255,46,151,.5),0 30px 60px rgba(0,0,0,.7);
}
/* marquee */
.ret-07__marquee{
  background:linear-gradient(90deg,var(--magenta),var(--yellow),var(--cyan),var(--magenta));
  background-size:300% 100%;
  border-radius:14px;padding:14px;text-align:center;margin-bottom:16px;
  box-shadow:inset 0 0 14px rgba(0,0,0,.5),0 0 20px rgba(255,203,5,.4);
  animation:ret-07-shift 6s linear infinite}
@keyframes ret-07-shift{to{background-position:300% 0}}
.ret-07__marquee b{font-size:1.1rem;letter-spacing:.06em;color:#10001f;text-shadow:1px 1px 0 #fff}

/* CRT screen with bezel */
.ret-07__bezel{background:#000;border-radius:16px;padding:16px;box-shadow:inset 0 0 0 3px #2a2a2a,inset 0 0 30px #000}
.ret-07__screen{
  background:var(--screen);border-radius:8px;padding:22px 18px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,240,255,.12);min-height:280px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.ret-07__screen::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.25) 3px 4px)}
.ret-07__hi{font-family:'Silkscreen';font-size:.7rem;letter-spacing:.2em;color:var(--magenta);position:absolute;top:12px;left:14px}
.ret-07__credit{font-family:'Silkscreen';font-size:.7rem;color:var(--cyan);position:absolute;top:12px;right:14px}
.ret-07__logo{font-size:1.7rem;line-height:1.5;color:var(--yellow);text-shadow:3px 3px 0 var(--magenta),-1px -1px 0 var(--cyan);animation:ret-07-hue 4s linear infinite}
@keyframes ret-07-hue{50%{filter:hue-rotate(40deg)}}
.ret-07__sub{font-family:'Silkscreen';font-size:.8rem;letter-spacing:.1em;color:#fff;line-height:1.6}
.ret-07__sub i{color:var(--green)}
.ret-07__start{font-size:.78rem;color:var(--cyan);animation:ret-07-blink 1s steps(2) infinite}
@keyframes ret-07-blink{50%{opacity:0}}
/* little sprite row */
.ret-07__sprites{display:flex;gap:14px;font-size:1.2rem;animation:ret-07-march 1s steps(2) infinite}
@keyframes ret-07-march{50%{transform:translateY(-3px)}}

/* control panel */
.ret-07__panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding:16px;
  background:linear-gradient(180deg,#000,#1a1a1a);border-radius:12px;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.ret-07__joy{width:58px;height:58px;position:relative}
.ret-07__joy .base{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:46px;height:20px;border-radius:50%;background:radial-gradient(#444,#111)}
.ret-07__joy .stick{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:8px;height:30px;background:linear-gradient(90deg,#777,#222);border-radius:4px;transform-origin:bottom;animation:ret-07-wiggle 2s ease-in-out infinite}
.ret-07__joy .ball{position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6ba8,var(--magenta));box-shadow:0 0 10px var(--magenta)}
@keyframes ret-07-wiggle{0%,100%{transform:translateX(-50%) rotate(-8deg)}50%{transform:translateX(-50%) rotate(10deg)}}
.ret-07__buttons{display:flex;gap:12px}
.ret-07__b{width:44px;height:44px;border-radius:50%;cursor:pointer;border:none;
  box-shadow:0 5px 0 rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.4);transition:transform .06s,box-shadow .06s}
.ret-07__b:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.6),inset 0 2px 4px rgba(0,0,0,.3)}
.ret-07__b--r{background:radial-gradient(circle at 35% 30%,#ff8da8,#ff2e3c)}
.ret-07__b--y{background:radial-gradient(circle at 35% 30%,#fff0a0,var(--yellow))}
.ret-07__b--c{background:radial-gradient(circle at 35% 30%,#a0fbff,var(--cyan))}
.ret-07__b--g{background:radial-gradient(circle at 35% 30%,#b6ffae,var(--green))}

.ret-07__coin{text-align:center;margin-top:14px;font-family:'Silkscreen';font-size:.72rem;letter-spacing:.18em;color:var(--yellow)}
.ret-07__coin span{display:inline-block;border:2px solid var(--yellow);border-radius:4px;padding:6px 12px}

@media(max-width:420px){.ret-07__logo{font-size:1.3rem}.ret-07__buttons{gap:8px}}
@media (prefers-reduced-motion: reduce){.ret-07 *{animation:none !important}}

More from 12 CSS Retro UI Designs

ASCII 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 ExamplesRetro Cassette Player UI Web ComponentVaporwave Aesthetic Website Theme Design90s Website Guestbook WidgetY2K Style Web UI KitRetro Clothing Store Web UI Design
View the full collection →

Search CodeFronts

Loading…

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