12 CSS Retro UI Designs 02 / 12

Retro Futuristic Terminal UI Code

A boot-sequence CRT terminal with curved glass: layered scanlines, rolling interlace, vignette curvature, phosphor glow and a flicker keyframe, plus staggered line-by-line teletype reveal and a blinking block cursor.

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

The code

<div class="ret-02">
  <div class="ret-02__crt">
    <div class="ret-02__glow"></div>
    <div class="ret-02__scr">
      <div class="ret-02__head">
        <span>[ <b>NEXUS//OS</b> v9.84 ]</span>
        <span class="dim">NODE 0xFA · SECURE LINK · 1984 baud</span>
      </div>

      <div class="ret-02__ascii">  _   _ _____ __  __ _   _ ____
 | \ | | ____|  \/  | | | / ___|
 |  \| |  _| | |\/| | | | \___ \
 | |\  | |___| |  | | |_| |___) |
 |_| \_|_____|_|  |_|\___/|____/</div>

      <span class="ret-02__l"><span class="dim">user@nexus:~$</span> ./boot --diagnostic</span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] mounting /dev/neural0 ............ <span class="cy">linked</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] decrypting handshake <span class="amb">RSA-4096</span> ... <span class="cy">verified</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] uplink to <span class="amb">ORBITAL-7</span> .......... <span class="cy">stable</span></span>
      <span class="ret-02__l"><span class="dim">     phosphor calibration</span></span>
      <span class="ret-02__l">     <span class="ret-02__bar">▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰</span><span class="dim">▱▱</span>  92%</span>
      <span class="ret-02__l"> </span>
      <span class="ret-02__l"><span class="amb">WARNING:</span> reality buffer overflow in sector 7G.</span>
      <span class="ret-02__l"><span class="dim">// the green glow is real phosphor decay, faked in pure CSS:</span></span>
      <span class="ret-02__l"><span class="dim">// scanlines + vignette + flicker keyframes, layered on glass.</span></span>
      <span class="ret-02__l">Awaiting input<span class="dim"> — type a command, jack in.</span></span>

      <div class="ret-02__prompt">
        <b>user@nexus:~$</b><span class="ret-02__cursor"></span>
      </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;900&display=swap');

.ret-02, .ret-02 *, .ret-02 *::before, .ret-02 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-02 ::selection{background:#00ff9c;color:#02110a}
.ret-02 ::-moz-selection{background:#00ff9c;color:#02110a}

.ret-02{
  --bg:#030806;
  --green:#27ff9c;
  --dim:#13895a;
  --amber:#ffb000;
  --cyan:#21e6ff;
  --scan:rgba(0,0,0,.28);
  font-family:'Share Tech Mono',monospace;
  background:radial-gradient(120% 120% at 50% 0%,#06170f,#020604 70%);
  color:var(--green);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  padding:clamp(14px,3vw,40px);
}
/* the CRT glass: curvature via radial vignette + scanlines + flicker */
.ret-02__crt{
  position:relative;height:calc(100vh - clamp(28px,6vw,80px));
  border-radius:26px;padding:clamp(16px,3vw,38px);
  background:linear-gradient(180deg,rgba(39,255,156,.04),transparent),var(--bg);
  box-shadow:inset 0 0 120px rgba(39,255,156,.12),inset 0 0 30px rgba(0,0,0,.9),0 0 0 3px #0b1f16,0 0 0 9px #050d09,0 30px 80px rgba(0,0,0,.8);
  overflow:hidden;
}
.ret-02__crt::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:8;
  background:repeating-linear-gradient(0deg,transparent 0 2px,var(--scan) 2px 4px);mix-blend-mode:multiply;
  animation:ret-02-roll 8s linear infinite}
@keyframes ret-02-roll{to{background-position:0 200px}}
.ret-02__crt::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;border-radius:26px;
  background:radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.7)}
.ret-02__glow{position:absolute;inset:0;z-index:7;pointer-events:none;animation:ret-02-flick 5s infinite;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(39,255,156,.03),transparent)}
@keyframes ret-02-flick{0%,96%,100%{opacity:1}97%{opacity:.78}98%{opacity:.92}}

.ret-02__scr{position:relative;z-index:6;height:100%;overflow-y:auto;font-size:clamp(13px,1.6vw,16px);line-height:1.7;text-shadow:0 0 6px rgba(39,255,156,.6)}
.ret-02__scr::-webkit-scrollbar{width:8px}
.ret-02__scr::-webkit-scrollbar-thumb{background:var(--dim)}

.ret-02__head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-bottom:1px dashed var(--dim);padding-bottom:10px;margin-bottom:14px;color:var(--dim)}
.ret-02__head b{font-family:'Orbitron';color:var(--green);letter-spacing:.2em;font-weight:900;font-size:1.1em}
.ret-02__l{display:block;white-space:pre-wrap;word-break:break-word;opacity:0;transform:translateY(2px);animation:ret-02-type .01s forwards}
.ret-02__l:nth-child(1){animation-delay:.1s}
.ret-02__l:nth-child(2){animation-delay:.35s}
.ret-02__l:nth-child(3){animation-delay:.6s}
.ret-02__l:nth-child(4){animation-delay:.85s}
.ret-02__l:nth-child(5){animation-delay:1.15s}
.ret-02__l:nth-child(6){animation-delay:1.5s}
.ret-02__l:nth-child(7){animation-delay:1.8s}
.ret-02__l:nth-child(8){animation-delay:2.1s}
.ret-02__l:nth-child(9){animation-delay:2.45s}
.ret-02__l:nth-child(10){animation-delay:2.8s}
.ret-02__l:nth-child(11){animation-delay:3.1s}
@keyframes ret-02-type{to{opacity:1;transform:none}}
.ret-02 .amb{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.6)}
.ret-02 .cy{color:var(--cyan);text-shadow:0 0 6px rgba(33,230,255,.6)}
.ret-02 .dim{color:var(--dim);text-shadow:none}
.ret-02__ok{color:#02110a;background:var(--green);padding:0 6px}
.ret-02__bar{display:inline-block;color:var(--green)}

.ret-02__ascii{color:var(--dim);font-size:clamp(8px,1.2vw,12px);line-height:1.15;white-space:pre;margin:6px 0 10px}

.ret-02__prompt{display:flex;align-items:center;gap:8px;margin-top:14px;border-top:1px dashed var(--dim);padding-top:12px}
.ret-02__prompt b{color:var(--amber)}
.ret-02__cursor{width:10px;height:1.1em;background:var(--green);box-shadow:0 0 8px var(--green);animation:ret-02-blink 1s steps(2) infinite}
@keyframes ret-02-blink{50%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .ret-02__crt::before,.ret-02__glow,.ret-02__cursor,.ret-02__l{animation:none !important;opacity:1 !important;transform:none !important}
}

More from 12 CSS Retro UI Designs

Y2K Style Web UI KitRetro Clothing Store Web UI DesignASCII Art Web Interface CodeRetro Desktop Portfolio Website TemplateRetro Windows 95 UI (CSS Template)8 Bit Pixel Art UI Elements & ButtonsNeo Brutalist UI Components ExamplesRetro Cassette Player UI Web ComponentVaporwave Aesthetic Website Theme DesignRetro Arcade Game UI Kit90s Website Guestbook Widget
View the full collection →

Search CodeFronts

Loading…

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