12 CSS Retro UI Designs03 / 12

Pure CSSMIT licensed

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. Press Start 2P + VT323 on a 16-colour dusk palette with a CRT grid.

Published

Live Demo
Try it

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Retro UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: 8 Bit Pixel Art UI Elements & Buttons
Source: https://codefronts.com/design-styles/css-retro-designs/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. Press Start 2P + VT323 on a 16-colour dusk palette with a CRT grid.
## HTML
```html
<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>
```
## CSS
```css
@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;
  }
}
```

Techniques used in this demo

filterMDN ↗@keyframesMDN ↗clamp()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →