12 CSS Retro UI Designs 03 / 12

8 Bit Pixel Art UI Elements & Buttons

An 8-bit RPG HUD kit drawn entirely with layered box-shadows — no border-radius, no images: chunky pixel panels, a heart-based HP row, a stepped XP bar, coin counter, type-on dialogue box and depressible 3D pixel buttons.

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

The code

<div class="ret-03">
  <div class="ret-03__stage">

    <div class="ret-03__panel">
      <h2>★ QUEST START ★</h2>
      <div class="ret-03__dialog" style="margin-top:18px">
        <div class="ret-03__avatar">🧙</div>
        <div class="ret-03__speech">
          <div class="ret-03__name">OLD WIZARD</div>
          <div class="ret-03__type">Every border here is pure box-shadow...</div>
        </div>
      </div>
    </div>

    <div class="ret-03__panel">
      <div class="ret-03__hud">
        <div>
          <div class="ret-03__name" style="color:var(--red);font-size:10px;margin-bottom:8px">HP</div>
          <div class="ret-03__hearts">
            <span>❤️</span><span>❤️</span><span>❤️</span><span class="e">🤍</span><span class="e">🤍</span>
          </div>
        </div>
        <div class="ret-03__xp">
          <small>EXP &nbsp;LV.7 → LV.8</small>
          <div class="ret-03__xpbar"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        </div>
        <div class="ret-03__coins">🪙 x 1280</div>
      </div>
    </div>

    <div class="ret-03__btns">
      <span class="ret-03__btn">⚔️ ATTACK</span>
      <span class="ret-03__btn ret-03__btn--g">🛡️ DEFEND</span>
      <span class="ret-03__btn ret-03__btn--b">🎒 ITEMS</span>
    </div>

    <div class="ret-03__blink">▶ PRESS START ◀</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

.ret-03, .ret-03 *, .ret-03 *::before, .ret-03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-03 ::selection{background:#ffd23f;color:#1a1c2c}
.ret-03 ::-moz-selection{background:#ffd23f;color:#1a1c2c}

.ret-03{
  --bg:#1a1c2c;
  --bg2:#29366f;
  --ink:#f4f4f4;
  --red:#ef476f;
  --green:#5fe36c;
  --blue:#3fa7ff;
  --gold:#ffd23f;
  --shadow:#0d0e1a;
  font-family:'Press Start 2P',monospace;
  background:var(--bg);
  background-image:
    linear-gradient(rgba(63,167,255,.05) 2px,transparent 2px),
    linear-gradient(90deg,rgba(63,167,255,.05) 2px,transparent 2px);
  background-size:32px 32px;
  color:var(--ink);
  min-height:100vh;
  image-rendering:pixelated;
  padding:clamp(14px,4vw,46px);
  display:flex;align-items:center;justify-content:center;
}
.ret-03__stage{width:100%;max-width:760px;display:grid;gap:22px}

/* the chunky pixel border, drawn with layered box-shadows (no border-radius) */
.ret-03__panel{
  background:var(--bg2);
  padding:22px;position:relative;
  box-shadow:
    0 -6px 0 0 var(--ink), 0 6px 0 0 var(--shadow),
    -6px 0 0 0 var(--ink), 6px 0 0 0 var(--shadow),
    0 0 0 6px var(--ink),
    -6px -6px 0 6px var(--ink), 6px 6px 0 6px var(--shadow);
}
.ret-03__panel h2{font-size:13px;line-height:1.8;color:var(--gold);text-shadow:2px 2px 0 var(--shadow)}
.ret-03__panel p{font-family:'VT323',monospace;font-size:21px;line-height:1.4;margin-top:14px;color:#cfd3f0}

/* dialog with portrait + typed text */
.ret-03__dialog{display:flex;gap:18px;align-items:flex-start}
.ret-03__avatar{
  width:64px;height:64px;flex:0 0 64px;background:var(--shadow);
  display:grid;place-items:center;font-size:30px;
  box-shadow:0 0 0 4px var(--ink),0 0 0 8px var(--shadow);
}
.ret-03__speech{flex:1}
.ret-03__speech .ret-03__name{color:var(--green);font-size:11px}
.ret-03__type{font-family:'VT323',monospace;font-size:22px;line-height:1.35;margin-top:10px;overflow:hidden;white-space:nowrap;border-right:3px solid var(--gold);
  width:0;animation:ret-03-typing 3s steps(38) infinite alternate, ret-03-cur .6s steps(2) infinite}
@keyframes ret-03-typing{0%,8%{width:0}92%,100%{width:30ch}}
@keyframes ret-03-cur{50%{border-color:transparent}}

/* HUD: hearts + XP bar + coins */
.ret-03__hud{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.ret-03__hearts{display:flex;gap:5px;font-size:20px}
.ret-03__hearts span{filter:drop-shadow(2px 2px 0 var(--shadow))}
.ret-03__hearts .e{opacity:.25}
.ret-03__coins{font-size:11px;color:var(--gold);text-shadow:2px 2px 0 var(--shadow);display:flex;align-items:center;gap:8px}
.ret-03__xp{flex:1 1 200px;min-width:160px}
.ret-03__xp small{font-family:'VT323';font-size:18px;color:#9aa3d8;display:block;margin-bottom:5px}
.ret-03__xpbar{height:18px;background:var(--shadow);box-shadow:0 0 0 3px var(--ink);display:flex;padding:3px;gap:3px}
.ret-03__xpbar i{flex:0 0 16px;background:var(--green);box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.ret-03__xpbar i:nth-child(n+8){background:#3a3f5e;box-shadow:none}

/* pixel buttons that depress on hover/active */
.ret-03__btns{display:flex;gap:16px;flex-wrap:wrap}
.ret-03__btn{
  font-family:'Press Start 2P';font-size:11px;color:var(--ink);cursor:pointer;
  padding:14px 20px;background:var(--red);position:relative;
  box-shadow:0 6px 0 0 #a8264a, 0 0 0 4px var(--shadow);
  transition:transform .05s steps(2),box-shadow .05s steps(2);user-select:none;
}
.ret-03__btn--g{background:var(--green);box-shadow:0 6px 0 0 #2f9b3a,0 0 0 4px var(--shadow);color:var(--shadow)}
.ret-03__btn--b{background:var(--blue);box-shadow:0 6px 0 0 #1f6fb0,0 0 0 4px var(--shadow)}
.ret-03__btn:hover{transform:translateY(2px)}
.ret-03__btn:active{transform:translateY(6px);box-shadow:0 0 0 0 #a8264a,0 0 0 4px var(--shadow)}
.ret-03__btn--g:active{box-shadow:0 0 0 0 #2f9b3a,0 0 0 4px var(--shadow)}
.ret-03__btn--b:active{box-shadow:0 0 0 0 #1f6fb0,0 0 0 4px var(--shadow)}

.ret-03__blink{font-family:'Press Start 2P';font-size:10px;color:var(--gold);text-align:center;animation:ret-03-bl 1s steps(2) infinite}
@keyframes ret-03-bl{50%{opacity:0}}

@media(max-width:520px){.ret-03__type{animation:none;width:auto;white-space:normal;border:0}}
@media (prefers-reduced-motion: reduce){.ret-03__type,.ret-03__blink{animation:none !important;width:auto;white-space:normal;border:0}}

More from 12 CSS Retro UI Designs

Retro Cassette Player UI Web ComponentVaporwave Aesthetic Website Theme DesignRetro Arcade Game UI Kit90s 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 CodeNeo Brutalist UI Components Examples
View the full collection →

Search CodeFronts

Loading…

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